Merge pull request #408 from AppQuality/hotfix-editor-issues

Hotfix editor issues

CHANGELOG.md

@@ -1,3 +1,52 @@
+# v3.1.105 (Mon Sep 23 2024)
+
+#### 🐛 Bug Fix
+
+- release new version [#407](https://github.com/AppQuality/unguess-design-system/pull/407) ([@Kariamos](https://github.com/Kariamos) [@d-beezee](https://github.com/d-beezee) [@iacopolea](https://github.com/iacopolea))
+- hide language selector [#405](https://github.com/AppQuality/unguess-design-system/pull/405) ([@Kariamos](https://github.com/Kariamos))
+- fix: Update settingValue type to string in UserMenuArgs and SettingsP… [#404](https://github.com/AppQuality/unguess-design-system/pull/404) ([@Kariamos](https://github.com/Kariamos))
+- feat: Add hue colors docs [#406](https://github.com/AppQuality/unguess-design-system/pull/406) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 3
+
+- [@d-beezee](https://github.com/d-beezee)
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco ([@Kariamos](https://github.com/Kariamos))
+
+---
+
+# v3.1.104 (Tue Jul 02 2024)
+
+#### 🐛 Bug Fix
+
+- pipPlayer + chat improvements [#402](https://github.com/AppQuality/unguess-design-system/pull/402) ([@Kariamos](https://github.com/Kariamos) [@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon) [@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- feat: Add Picture-in-Picture functionality to Player component [#400](https://github.com/AppQuality/unguess-design-system/pull/400) ([@iacopolea](https://github.com/iacopolea))
+- fix: avatar type in the attachments lightbox is now the same as the a… [#401](https://github.com/AppQuality/unguess-design-system/pull/401) ([@Kariamos](https://github.com/Kariamos))
+
+#### Authors: 4
+
+- Gianpaolo Sinatra ([@sinatragianpaolo](https://github.com/sinatragianpaolo))
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Marco ([@Kariamos](https://github.com/Kariamos))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v3.1.103 (Fri Jun 28 2024)
+
+#### 🐛 Bug Fix
+
+- release 20240628 [#399](https://github.com/AppQuality/unguess-design-system/pull/399) ([@iDome89](https://github.com/iDome89) [@marcbon](https://github.com/marcbon))
+- fix words in obs [#398](https://github.com/AppQuality/unguess-design-system/pull/398) ([@iDome89](https://github.com/iDome89))
+- Add highlited observations fix [#397](https://github.com/AppQuality/unguess-design-system/pull/397) ([@iDome89](https://github.com/iDome89))
+
+#### Authors: 2
+
+- [@iDome89](https://github.com/iDome89)
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.102 (Fri Jun 21 2024)
 
 #### 🐛 Bug Fix

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.102",
+  "version": "3.1.105-deps5",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -60,7 +60,7 @@
     "@zendeskgarden/react-modals": "^8.49.0",
     "@zendeskgarden/react-notifications": "^8.49.0",
     "@zendeskgarden/react-pagination": "^8.49.0",
-    "@zendeskgarden/react-tables": "^8.49.0",
+    "@zendeskgarden/react-tables": "8.62.0",
     "@zendeskgarden/react-tabs": "^8.49.0",
     "@zendeskgarden/react-tags": "^8.49.0",
     "@zendeskgarden/react-tooltips": "^8.49.0",
@@ -88,10 +88,9 @@
     "@svgr/rollup": "^8.0.1",
     "@types/jest": "^27.4.1",
     "@types/node": "^16.11.26",
-    "@types/react": "^18.0.25",
-    "@types/react-dom": "^17.0.11",
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
     "@types/react-window": "^1.8.5",
-    "@types/styled-components": "^5.1.23",
     "@types/ua-parser-js": "^0.7.36",
     "@types/uuid": "^9.0.8",
     "@zendeskgarden/react-dropdowns": "^8.49.0",
@@ -106,6 +105,7 @@
     "react-scripts": "^5.0.1",
     "rimraf": "3.0.2",
     "rollup": "~2.66",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.34.1",
     "storybook": "^7.0.9",
     "styled-components": "^6.1.1",
@@ -141,12 +141,14 @@
     ]
   },
   "peerDependencies": {
+    "@types/react": "^17.0.0 || ^18.0.0",
+    "@types/react-dom": "^17.0.0 || ^18.0.0",
     "@zendeskgarden/react-dropdowns": "^8.49.0",
     "@zendeskgarden/react-forms": "^8.49.0",
     "@zendeskgarden/react-theming": "^8.48.2",
     "formik": "^2.2.9",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
     "styled-components": "^6.1.1"
   }
 }

rollup.config.js

@@ -1,6 +1,7 @@
 // rollup.config.js
 import image from "@rollup/plugin-image";
 import svgr from "@svgr/rollup";
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
 import typescript from "rollup-plugin-typescript2";
 
 // eslint-disable-next-line import/no-anonymous-default-export
@@ -11,6 +12,7 @@ export default {
     format: "cjs",
   },
   plugins: [
+    peerDepsExternal(),
     image(),
     svgr({
       dimensions: true,

src/stories/color-swatch/index.tsx

@@ -16,7 +16,7 @@ const Trigger = styled.div`
 `;
 
 const StyledColorSwatchDialog = styled(ColorSwatchDialog)<{
-  disableTooltip: boolean;
+  disableTooltip?: boolean;
 }>`
   ${({ disableTooltip }) =>
     disableTooltip &&

src/stories/player/parts/bookmark.tsx

@@ -5,6 +5,7 @@ import { IBookmark } from "../_types";
 import { useProgressContext } from "../context/progressContext";
 import { ReactComponent as GripIcon } from "../../../assets/icons/grip.svg";
 import { getColor } from "../../theme/utils";
+import { TooltipArgs } from "../../tooltip/_types";
 
 const StyledGrabber = styled.div<{ isEnd?: boolean }>`
   position: absolute;
@@ -70,10 +71,8 @@ const Rect = styled.div<{ hue?: string; isActive?: boolean; isFocused?:boolean;
   ${({ isActive }) => isActive && activeBookMark}
   ${({ isFocused }) => isFocused && activeBookMark}
 `;
-const StyledTooltip = styled(Tooltip)<{ tooltipColor: string }>`
+const StyledTooltip = styled(Tooltip)`
   margin-bottom: ${({ theme }) => theme.space.sm};
-  color: ${({ tooltipColor }) => tooltipColor};
-
 `;
 
 const Grabber = (props: {

src/stories/profile-modal/items/helpMenuItem.tsx

@@ -145,9 +145,9 @@ export const HelpItem = (props: HelpItemProps) => {
           onClick={props.toggleChat}
           style={{ paddingLeft: theme.space.xxs }}
         >
-          <StyledFooterButton.StartIcon>
+          <Button.StartIcon>
             <InfoFill color={theme.palette.blue[600]} />
-          </StyledFooterButton.StartIcon>
+          </Button.StartIcon>
           {props.chatSupportLabel ?? "Report a technical issue"}
         </StyledFooterButton>
       </Footer>

src/stories/table/index.stories.tsx

@@ -23,7 +23,6 @@ import { FixedSizeList } from "react-window";
 import { Field } from "../forms/field";
 import { Checkbox } from "../forms/checkbox";
 import { Label } from "../label";
-import { KEY_CODES } from "@zendeskgarden/container-utilities";
 
 const createRow = (
   item: IRow,
@@ -367,7 +366,7 @@ const SelectionTemplate: Story<TableProps> = ({ columns, items, ...args }) => {
                   <Checkbox
                     checked={row.selected}
                     onKeyDown={(e) => {
-                      if (e.keyCode === KEY_CODES.SHIFT) {
+                      if (e.shiftKey) {
                         setShiftEnabled(true);
                       }
                     }}

src/stories/tags/index.stories.tsx

@@ -3,7 +3,6 @@ import { Tag } from ".";
 import { Col } from "../grid/col";
 import { Row } from "../grid/row";
 import { TagArgs } from "./_types";
-import { KEY_CODES } from "@zendeskgarden/container-utilities";
 import { ReactComponent as LeafIcon } from "../../assets/icons/leaf-stroke.svg";
 
 
@@ -15,8 +14,13 @@ interface TagStoryProps extends TagArgs {
   secondaryTextColor: string;
 }
 
-const handleKeyDown = (e: React.KeyboardEvent<any>) => {
-  if (e.keyCode === KEY_CODES.DELETE || e.keyCode === KEY_CODES.BACKSPACE) {
+const KEY_CODES = {
+  DELETE: 'Delete',
+  BACKSPACE: 'Backspace'
+};
+
+const handleKeyDown = (e: React.KeyboardEvent) => {
+  if (e.key === KEY_CODES.DELETE || e.key === KEY_CODES.BACKSPACE) {
     e.preventDefault();
     alert("Tag dismissed via keyboard");
   }

src/stories/tooltip/index.tsx

@@ -1,9 +1,9 @@
 import { Tooltip as ZendeskTooltip } from "@zendeskgarden/react-tooltips";
-import { getColor } from "../theme/utils";
 import { useContext } from "react";
-import { TooltipArgs } from "./_types";
 import styled, { ThemeContext } from "styled-components";
 import { theme as globalTheme } from "../theme";
+import { getColor } from "../theme/utils";
+import { TooltipArgs } from "./_types";
 
 /**
  * Tooltips appear when a user hovers or focuses an element. They provide contextual information about the element they are paired with.
@@ -23,7 +23,7 @@ const TooltipComponent = (props: TooltipArgs) => {
   );
 };
 
-const Tooltip = styled(TooltipComponent)`
+const StyledTooltip = styled(TooltipComponent)`
   box-shadow: ${({ theme }) =>
     theme.shadows.lg(
       `${theme.space.base * 3}px`,
@@ -40,4 +40,6 @@ const Tooltip = styled(TooltipComponent)`
     `};
 `;
 
+const Tooltip = (props: TooltipArgs) => <StyledTooltip {...props} />;
+
 export { Tooltip };