@appquality/unguess-design-system 3.1.59 → 3.1.61

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# v3.1.61 (Fri Dec 29 2023)
+
+#### 🐛 Bug Fix
+
+- Improve chat spacing and save behaviour [#288](https://github.com/AppQuality/unguess-design-system/pull/288) ([@cannarocks](https://github.com/cannarocks))
+- Update-chat-spaces [#287](https://github.com/AppQuality/unguess-design-system/pull/287) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v3.1.60 (Fri Dec 29 2023)
+
+#### 🐛 Bug Fix
+
+- Improve chat comments readability [#286](https://github.com/AppQuality/unguess-design-system/pull/286) ([@iDome89](https://github.com/iDome89) [@cannarocks](https://github.com/cannarocks))
+- Add date comments [#285](https://github.com/AppQuality/unguess-design-system/pull/285) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon) [@iDome89](https://github.com/iDome89))
+
+#### Authors: 3
+
+- [@iDome89](https://github.com/iDome89)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.57 (Thu Dec 28 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -2302,19 +2302,20 @@ const useChatContext = () => {
 };
 
 const ChatContainer = styled__default["default"](Card) `
-  padding: ${({ theme }) => theme.space.md};
+  padding: ${({ theme }) => `0 ${theme.space.base * 4}px`};
   &:hover {
     box-shadow: none;
   }
   cursor: default;
 `;
 const MessagesContainer = styled__default["default"].div `
-  padding: ${({ theme }) => theme.space.md};
-  margin: ${({ theme }) => `0 -${theme.space.md}`};
+  padding: ${({ theme }) => `${theme.space.md} ${theme.space.sm}`};
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
   display: flex;
   flex-direction: column;
-  gap: ${({ theme }) => theme.space.sm};
+  gap: ${({ theme }) => theme.space.xs};
   background: ${({ chatBkg }) => chatBkg !== null && chatBkg !== void 0 ? chatBkg : `#fff`};
+  overflow-y: auto;
 `;
 
 /**
@@ -2325,7 +2326,7 @@ const Title$1 = (props) => jsxRuntime.jsx(reactNotifications.Title, Object.assig
 const ChatTitle = styled__default["default"](Title$1) `
   color: ${({ theme }) => theme.palette.blue[600]};
   margin: ${({ theme }) => `0 -${theme.space.md}`};
-  padding: ${({ theme }) => `0 ${theme.space.md} ${theme.space.sm}`};
+  padding: ${({ theme }) => `${theme.space.sm} ${theme.space.md}`};
   border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey[200]}`};
 `;
 
@@ -2746,13 +2747,13 @@ const FloatingMenu = (props) => {
 const ChatBoxContainer = styled__default["default"].div `
   display: flex;
   border-top: 1px solid ${({ theme }) => theme.palette.grey[200]};
-  margin: ${({ theme }) => `0 -${theme.space.md}`};
-  padding: ${({ theme }) => theme.space.md};
+  margin: ${({ theme }) => `0 -${theme.space.base * 4}px`};
+  padding: ${({ theme }) => `${theme.space.base * 4}px ${theme.space.sm} 0`};
 `;
 const EditorContainer$1 = styled__default["default"](reactForms.FauxInput) `
   margin-left: ${({ theme }) => theme.space.sm};
+  padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
   .ProseMirror {
-    padding: ${({ theme }) => `${theme.space.xxs} ${theme.space.xs}`};
     background-color: #fff;
     min-height: 36px;
     outline: none;
@@ -2778,10 +2779,11 @@ const CommentBox = (_a) => {
     var _b;
     var { placeholderOptions } = _a, props = __rest(_a, ["placeholderOptions"]);
     const { children, hasInlineMenu, bubbleOptions, author } = props;
-    const { setEditor, triggerSave } = useChatContext();
+    const { editor, setEditor, triggerSave } = useChatContext();
     const onKeyDown = (event) => {
         if ((event.ctrlKey || event.metaKey) && event.key === "Enter") {
             triggerSave();
+            editor === null || editor === void 0 ? void 0 : editor.commands.clearContent();
         }
     };
     const ed = react.useEditor(Object.assign({ extensions: [
@@ -2941,15 +2943,19 @@ const AuthorContainer = styled.styled.div `
   display: flex;
   gap: ${({ theme }) => theme.space.sm};
 `;
+const CommentDate = styled.styled.span `
+color: ${({ theme }) => theme.palette.grey[500]};
+font-weight: ${({ theme }) => theme.fontWeights.thin};
+`;
 const Footer$2 = styled.styled.div `
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   gap: ${({ theme }) => theme.space.xs};
 `;
-const Comment = ({ author, message, children, }) => {
+const Comment = ({ author, message, children, date, }) => {
     var _a, _b;
-    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text" }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(Title$1, { children: (_b = author.name) !== null && _b !== void 0 ? _b : "User" }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(Editor, Object.assign({ editable: false }, { children: message })) })] })] }), jsxRuntime.jsx(Footer$2, { children: children })] }));
+    return (jsxRuntime.jsxs(CommentCard, { children: [jsxRuntime.jsxs(AuthorContainer, { children: [jsxRuntime.jsx(Avatar, Object.assign({ avatarType: (_a = author.avatarType) !== null && _a !== void 0 ? _a : "text" }, { children: author.avatar })), jsxRuntime.jsxs("div", { children: [jsxRuntime.jsxs(Title$1, { children: [(_b = author.name) !== null && _b !== void 0 ? _b : "User", jsxRuntime.jsx(CommentDate, { children: date })] }), jsxRuntime.jsx(ReadOnly, { children: jsxRuntime.jsx(Editor, Object.assign({ editable: false }, { children: message })) })] })] }), jsxRuntime.jsx(Footer$2, { children: children })] }));
 };
 
 /**

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "start" | "end" | "center" | "baseline" | "stretch" | undefined;
-    justifyContent?: "start" | "end" | "center" | "between" | "around" | undefined;
-    justifyContentXs?: "start" | "end" | "center" | "between" | "around" | undefined;
-    justifyContentSm?: "start" | "end" | "center" | "between" | "around" | undefined;
-    justifyContentMd?: "start" | "end" | "center" | "between" | "around" | undefined;
-    justifyContentLg?: "start" | "end" | "center" | "between" | "around" | undefined;
-    justifyContentXl?: "start" | "end" | "center" | "between" | "around" | undefined;
+    alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
+    justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
+    justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -84,7 +84,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -93,7 +93,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -110,7 +110,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXs?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfSm?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfMd?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfLg?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
-    alignSelfXl?: "start" | "end" | "center" | "baseline" | "stretch" | "auto" | undefined;
-    textAlign?: "start" | "end" | "center" | "justify" | undefined;
-    textAlignXs?: "start" | "end" | "center" | "justify" | undefined;
-    textAlignSm?: "start" | "end" | "center" | "justify" | undefined;
-    textAlignMd?: "start" | "end" | "center" | "justify" | undefined;
-    textAlignLg?: "start" | "end" | "center" | "justify" | undefined;
-    textAlignXl?: "start" | "end" | "center" | "justify" | undefined;
+    alignSelf?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXs?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfSm?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfMd?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfLg?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXl?: "center" | "start" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    textAlign?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
+    textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -381,7 +381,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -390,7 +390,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -407,7 +407,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "text" | "search" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -651,7 +651,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -660,7 +660,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -677,7 +677,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-posinset"?: number | undefined;
     "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
     "aria-readonly"?: (boolean | "true" | "false") | undefined;
-    "aria-relevant"?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
     "aria-required"?: (boolean | "true" | "false") | undefined;
     "aria-roledescription"?: string | undefined;
     "aria-rowcount"?: number | undefined;

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

@@ -76,7 +76,7 @@ declare const Chat: {
         "aria-colindex"?: number | undefined;
         "aria-colspan"?: number | undefined;
         "aria-controls"?: string | undefined;
-        "aria-current"?: boolean | "time" | "step" | "true" | "false" | "page" | "location" | "date" | undefined;
+        "aria-current"?: boolean | "time" | "date" | "step" | "true" | "false" | "page" | "location" | undefined;
         "aria-describedby"?: string | undefined;
         "aria-details"?: string | undefined;
         "aria-disabled"?: (boolean | "true" | "false") | undefined;

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

@@ -1,6 +1,7 @@
-import { Editor as TipTapEditor } from "@tiptap/react";
-import { ChatArgs, ChatEditorArgs } from "./_types";
+/// <reference types="react" />
 import { PlaceholderOptions } from "@tiptap/extension-placeholder";
+import { Editor as TipTapEditor } from "@tiptap/react";
+import { ChatEditorArgs } from "./_types";
 interface EditorStoryArgs extends ChatEditorArgs {
     children?: any;
     comments?: {
@@ -20,7 +21,7 @@ export declare const Default: import("@storybook/types").AnnotatedStoryFn<import
 export declare const Placeholder: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, EditorStoryArgs>;
 export declare const BubbleMenu: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, EditorStoryArgs>;
 export declare const CustomBackground: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, EditorStoryArgs>;
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ChatArgs & {
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("./_types").ChatArgs & {
     children?: import("react").ReactNode;
 }>;
 export default _default;

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

@@ -1,6 +1,7 @@
 import { PropsWithChildren } from "react";
 import { Author } from "../_types";
-export declare const Comment: ({ author, message, children, }: PropsWithChildren<{
+export declare const Comment: ({ author, message, children, date, }: PropsWithChildren<{
     author: Author;
     message: string;
+    date: string;
 }>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+/// <reference types="react" />
 export declare const ChatTitle: import("styled-components").IStyledComponent<"web", {
     isRegular?: boolean | undefined;
     defaultChecked?: boolean | undefined;
@@ -98,7 +98,7 @@ export declare const ChatTitle: import("styled-components").IStyledComponent<"we
     "aria-valuemin"?: number | undefined;
     "aria-valuenow"?: number | undefined;
     "aria-valuetext"?: string | undefined;
-    children?: ReactNode;
+    children?: import("react").ReactNode;
     dangerouslySetInnerHTML?: {
         __html: string | TrustedHTML;
     } | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.59",
+  "version": "3.1.61",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",