From d286b285900e73b65fc7658b61fb59af8dc1d846 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Mon, 18 Nov 2024 12:01:05 +0200 Subject: [PATCH 01/26] feat(AvatarGroupCounter): add option to render MenuButton on a container (#2591) --- .../core/src/components/AvatarGroup/AvatarGroupCounter.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx index 204b0795e8..610b7b9d21 100644 --- a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx +++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx @@ -26,6 +26,10 @@ export interface AvatarGroupCounterProps extends VibeComponentProps { counterProps?: AvatarGroupCounterVisualProps; counterTooltipCustomProps?: Partial; counterTooltipIsVirtualizedList?: boolean; + /** + * Relevant only for when AvatarGroup contains a clickable avatar + */ + counterDialogContainerSelector?: string; size?: AvatarSize; type?: AvatarType; counterAriaLabel?: string; @@ -37,6 +41,7 @@ const AvatarGroupCounter: React.FC = ({ counterProps, counterTooltipCustomProps, counterTooltipIsVirtualizedList = false, + counterDialogContainerSelector, size = Avatar.sizes.MEDIUM, type, counterAriaLabel, @@ -103,6 +108,7 @@ const AvatarGroupCounter: React.FC = ({ zIndex={1} className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)} ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`} + dialogContainerSelector={counterDialogContainerSelector} > {counterTooltipAvatars.map((avatar, index) => { From b27e3d2c90d0ce3d04d3ab6c7290029b8bc821ed Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Mon, 18 Nov 2024 10:49:05 +0000 Subject: [PATCH 02/26] Publish - monday-ui-react-core@2.145.0 - monday-ui-style@0.18.0 --- packages/core/CHANGELOG.md | 18 ++++++++++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 16 ++++++++++++++++ packages/style/package.json | 2 +- 4 files changed, 37 insertions(+), 3 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 299d8a8e09..342b8fd9f4 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,24 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.145.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.144.0...monday-ui-react-core@2.145.0) (2024-11-18) + + +### Bug Fixes + +* **TextArea:** don't show the help section if no help text or char co… ([#2590](https://github.com/mondaycom/vibe/issues/2590)) ([162a77d](https://github.com/mondaycom/vibe/commit/162a77d3c734f7833772e5567222de5698108356)) +* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef)) + + +### Features + +* **AvatarGroupCounter:** add option to render MenuButton on a container ([#2591](https://github.com/mondaycom/vibe/issues/2591)) ([d286b28](https://github.com/mondaycom/vibe/commit/d286b285900e73b65fc7658b61fb59af8dc1d846)) +* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83)) + + + + + # [2.144.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.143.1...monday-ui-react-core@2.144.0) (2024-11-15) diff --git a/packages/core/package.json b/packages/core/package.json index 976db0fdb5..146a21dde4 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.144.0", + "version": "2.145.0", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.17.0", + "monday-ui-style": "0.18.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index 8661db66e7..784d2e3af4 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.18.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.17.0...monday-ui-style@0.18.0) (2024-11-18) + + +### Bug Fixes + +* **WhatsNew:** update icon ([#2592](https://github.com/mondaycom/vibe/issues/2592)) ([fbcb99f](https://github.com/mondaycom/vibe/commit/fbcb99f257b624ee7a64eb270c30292b25f6e2ef)) + + +### Features + +* **PinFull:** new icon ([#2589](https://github.com/mondaycom/vibe/issues/2589)) ([1e34a3c](https://github.com/mondaycom/vibe/commit/1e34a3cff3ee9d1be3d62643258fbca20a2bed83)) + + + + + # [0.17.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.16.0...monday-ui-style@0.17.0) (2024-11-14) diff --git a/packages/style/package.json b/packages/style/package.json index 5f32dfec90..06b03470a0 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.17.0", + "version": "0.18.0", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { From 09c0dc83676f5b5a0504e25db0e26227f6b003c9 Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Mon, 18 Nov 2024 17:05:37 +0200 Subject: [PATCH 03/26] fix(table): horizontal scroll on react 18 (#2594) --- .../TableVirtualizedBody.tsx | 51 ++++++++++++------- 1 file changed, 33 insertions(+), 18 deletions(-) diff --git a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx index a1be43399c..86f1d4ab8a 100644 --- a/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx +++ b/packages/core/src/components/Table/TableVirtualizedBody/TableVirtualizedBody.tsx @@ -1,4 +1,4 @@ -import React, { ComponentType, forwardRef, UIEventHandler, useCallback, useEffect } from "react"; +import React, { ComponentType, forwardRef, useCallback, useEffect } from "react"; import { VibeComponentProps } from "../../../types"; import TableBody from "../TableBody/TableBody"; import styles from "./TableVirtualizedBody.module.scss"; @@ -28,29 +28,28 @@ const TableVirtualizedBody = forwardRef( const { size, virtualizedListRef, onVirtualizedListScroll, markTableAsVirtualized } = useTable(); const { resetHoveredRow } = useTableRowMenu(); - const onAutoSizerScroll = useCallback>( - e => { + const handleOuterScroll = useCallback( + (e: Event) => { + const target = e.target as HTMLDivElement; resetHoveredRow(); - onVirtualizedListScroll(e); + onVirtualizedListScroll({ + target, + currentTarget: target + } as unknown as React.UIEvent); }, [resetHoveredRow, onVirtualizedListScroll] ); useEffect(() => { - markTableAsVirtualized(); - }, [markTableAsVirtualized]); + const scrollElement = virtualizedListRef.current; + if (!scrollElement) return; - const itemRenderer = useCallback>>( - ({ index, style: { width: _width, ...style } }) => { - const currentItem = items[index]; - const element = rowRenderer(currentItem); - return React.cloneElement(element, { - style: { ...style, ...element.props?.style }, - key: index - }); - }, - [items, rowRenderer] - ); + scrollElement.addEventListener("scroll", handleOuterScroll); + + return () => { + scrollElement.removeEventListener("scroll", handleOuterScroll); + }; + }, [handleOuterScroll]); const handleVirtualizedVerticalScroll = useCallback( ({ @@ -67,6 +66,22 @@ const TableVirtualizedBody = forwardRef( [onScroll] ); + const itemRenderer = useCallback>>( + ({ index, style: { width: _width, ...style } }) => { + const currentItem = items[index]; + const element = rowRenderer(currentItem); + return React.cloneElement(element, { + style: { ...style, ...element.props?.style }, + key: index + }); + }, + [items, rowRenderer] + ); + + useEffect(() => { + markTableAsVirtualized(); + }, [markTableAsVirtualized]); + return ( {items?.length && ( - + {({ height, width }: AutoSizerSize) => ( Date: Mon, 18 Nov 2024 15:32:28 +0000 Subject: [PATCH 04/26] Publish - monday-ui-react-core@2.145.1 --- packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 342b8fd9f4..4116bbaf34 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.145.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.0...monday-ui-react-core@2.145.1) (2024-11-18) + + +### Bug Fixes + +* **table:** horizontal scroll on react 18 ([#2594](https://github.com/mondaycom/vibe/issues/2594)) ([09c0dc8](https://github.com/mondaycom/vibe/commit/09c0dc83676f5b5a0504e25db0e26227f6b003c9)) + + + + + # [2.145.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.144.0...monday-ui-react-core@2.145.0) (2024-11-18) diff --git a/packages/core/package.json b/packages/core/package.json index 146a21dde4..0789a432c6 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.145.0", + "version": "2.145.1", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", From 202e5a6a1e20b3fc9c9e20185d8d46fc713650b6 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Mon, 18 Nov 2024 19:25:34 +0200 Subject: [PATCH 05/26] fix(Switcher): revert icon change to older version (#2596) --- .../Icon/Icons/components/Switcher.tsx | 13 ++++++++++--- packages/style/src/Icons/Switcher.svg | 19 +++++++++++++++++-- 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/Switcher.tsx b/packages/core/src/components/Icon/Icons/components/Switcher.tsx index e2c1e22703..9d217b2e5a 100644 --- a/packages/core/src/components/Icon/Icons/components/Switcher.tsx +++ b/packages/core/src/components/Icon/Icons/components/Switcher.tsx @@ -5,9 +5,16 @@ export interface SwitcherProps extends React.SVGAttributes { size?: string | number; } const Switcher: React.FC = ({size, ...props}) => ( - - + + + + + + + + + ); Switcher.displayName = 'Switcher'; diff --git a/packages/style/src/Icons/Switcher.svg b/packages/style/src/Icons/Switcher.svg index 3502be3030..5585371f9f 100644 --- a/packages/style/src/Icons/Switcher.svg +++ b/packages/style/src/Icons/Switcher.svg @@ -1,3 +1,18 @@ - - + + + + + + + + + + + + + + + + + From e9ffede548c1f06c2221c75864f04d542048d37f Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Mon, 18 Nov 2024 17:39:21 +0000 Subject: [PATCH 06/26] Publish - monday-ui-react-core@2.145.2 - monday-ui-style@0.18.1 --- packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 11 +++++++++++ packages/style/package.json | 2 +- 4 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 4116bbaf34..6bc698fde4 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.145.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.1...monday-ui-react-core@2.145.2) (2024-11-18) + + +### Bug Fixes + +* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6)) + + + + + ## [2.145.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.0...monday-ui-react-core@2.145.1) (2024-11-18) diff --git a/packages/core/package.json b/packages/core/package.json index 0789a432c6..4fd3301051 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.145.1", + "version": "2.145.2", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.18.0", + "monday-ui-style": "0.18.1", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index 784d2e3af4..3c66c2bccf 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [0.18.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.0...monday-ui-style@0.18.1) (2024-11-18) + + +### Bug Fixes + +* **Switcher:** revert icon change to older version ([#2596](https://github.com/mondaycom/vibe/issues/2596)) ([202e5a6](https://github.com/mondaycom/vibe/commit/202e5a6a1e20b3fc9c9e20185d8d46fc713650b6)) + + + + + # [0.18.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.17.0...monday-ui-style@0.18.0) (2024-11-18) diff --git a/packages/style/package.json b/packages/style/package.json index 06b03470a0..5636a6f255 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.18.0", + "version": "0.18.1", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { From 5a140e8f335c4b2f4c83ae6beeae3de7db55d746 Mon Sep 17 00:00:00 2001 From: Floris Date: Tue, 19 Nov 2024 09:25:29 +0000 Subject: [PATCH 07/26] fix(TextArea): Error state not correctly set when maxlength is exceeded (#2588) --- packages/core/src/components/TextArea/TextArea.tsx | 4 ++-- .../core/src/components/TextArea/__tests__/TextArea.test.tsx | 1 + 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/TextArea/TextArea.tsx b/packages/core/src/components/TextArea/TextArea.tsx index a75c3b175d..ef4b5a7a8b 100644 --- a/packages/core/src/components/TextArea/TextArea.tsx +++ b/packages/core/src/components/TextArea/TextArea.tsx @@ -41,7 +41,6 @@ const TextArea = forwardRef( const numRows = rows || DEFAULT_ROWS[size]; const helpTextId = helpText && `${id}-help-text`; const allowExceedingMaxLengthTextId = allowExceedingMaxLength && `${id}-allow-exceeding-max-length`; - const isErrorState = error || (maxLength && value?.length > maxLength); const ariaDescribedby = useMemo( () => [helpTextId, allowExceedingMaxLengthTextId].filter(id => !!id).join(" ") || undefined, @@ -49,6 +48,7 @@ const TextArea = forwardRef( ); const [characterCount, setCharacterCount] = useState(value?.length || 0); + const isErrorState = error || (typeof maxLength === "number" && characterCount > maxLength); const handleOnChange = useCallback( (event: React.ChangeEvent) => { @@ -88,7 +88,7 @@ const TextArea = forwardRef( required={required} rows={numRows} className={cx(styles.textArea, [styles[size]], { [styles.resize]: resize })} - aria-invalid={error} + aria-invalid={isErrorState} aria-describedby={ariaDescribedby} onChange={handleOnChange} /> diff --git a/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx b/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx index ca6a3d7d1c..b504edc31b 100644 --- a/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx +++ b/packages/core/src/components/TextArea/__tests__/TextArea.test.tsx @@ -143,6 +143,7 @@ describe("TextArea", () => { expect(input).toHaveValue("12345678910"); expect(charCount).toHaveTextContent("11/10"); + expect(input).toHaveAttribute("aria-invalid", "true"); }); it("should allow text removal when character limit is exceeded", () => { From 3c045b18caf3dad36787c5ee9e84ebb3f71425b2 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 19 Nov 2024 11:43:53 +0200 Subject: [PATCH 08/26] feat(Switcher): update icon (#2597) --- .../Icon/Icons/components/Switcher.tsx | 10 +++++----- packages/style/src/Icons/Switcher.svg | 18 +++++------------- 2 files changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/Switcher.tsx b/packages/core/src/components/Icon/Icons/components/Switcher.tsx index 9d217b2e5a..01fd7b4fc0 100644 --- a/packages/core/src/components/Icon/Icons/components/Switcher.tsx +++ b/packages/core/src/components/Icon/Icons/components/Switcher.tsx @@ -5,14 +5,14 @@ export interface SwitcherProps extends React.SVGAttributes { size?: string | number; } const Switcher: React.FC = ({size, ...props}) => ( - - - + + - - + + diff --git a/packages/style/src/Icons/Switcher.svg b/packages/style/src/Icons/Switcher.svg index 5585371f9f..9c7e8eb251 100644 --- a/packages/style/src/Icons/Switcher.svg +++ b/packages/style/src/Icons/Switcher.svg @@ -1,18 +1,10 @@ - - - - - - - - - - - + + + - - + + From ceb7414f48d0096517a52b580cd609bcb81031b0 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 19 Nov 2024 14:26:34 +0200 Subject: [PATCH 09/26] test: skip flaky dropdown e2e test --- packages/testkit/__TESTS__/dropdown.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/testkit/__TESTS__/dropdown.spec.js b/packages/testkit/__TESTS__/dropdown.spec.js index cdb58d4ca7..f2c04d4492 100644 --- a/packages/testkit/__TESTS__/dropdown.spec.js +++ b/packages/testkit/__TESTS__/dropdown.spec.js @@ -12,7 +12,7 @@ test.describe("dropdown Class with Storybook", () => { DropDown = new Dropdown(page, DropDownLocator, "Test DropDown"); }); - test("set dropdown value", async ({ page }) => { + test.fixme("set dropdown value", async ({ page }) => { await page.waitForTimeout(3000); await DropDown.selectItem("2"); await page.waitForTimeout(500); From fdf9c64ac57eabca466f8716a75cc302773abfa8 Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Tue, 19 Nov 2024 12:41:01 +0000 Subject: [PATCH 10/26] Publish - monday-ui-react-core@2.146.0 - monday-ui-style@0.19.0 - @vibe/testkit@1.0.4 --- packages/core/CHANGELOG.md | 16 ++++++++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 11 +++++++++++ packages/style/package.json | 2 +- packages/testkit/CHANGELOG.md | 8 ++++++++ packages/testkit/package.json | 2 +- 6 files changed, 39 insertions(+), 4 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 6bc698fde4..81fceaed9a 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,22 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.146.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.2...monday-ui-react-core@2.146.0) (2024-11-19) + + +### Bug Fixes + +* **TextArea:** Error state not correctly set when maxlength is exceeded ([#2588](https://github.com/mondaycom/vibe/issues/2588)) ([5a140e8](https://github.com/mondaycom/vibe/commit/5a140e8f335c4b2f4c83ae6beeae3de7db55d746)) + + +### Features + +* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2)) + + + + + ## [2.145.2](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.1...monday-ui-react-core@2.145.2) (2024-11-18) diff --git a/packages/core/package.json b/packages/core/package.json index 4fd3301051..a032b8d17d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.145.2", + "version": "2.146.0", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.18.1", + "monday-ui-style": "0.19.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index 3c66c2bccf..c67ea6d104 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.19.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.1...monday-ui-style@0.19.0) (2024-11-19) + + +### Features + +* **Switcher:** update icon ([#2597](https://github.com/mondaycom/vibe/issues/2597)) ([3c045b1](https://github.com/mondaycom/vibe/commit/3c045b18caf3dad36787c5ee9e84ebb3f71425b2)) + + + + + ## [0.18.1](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.0...monday-ui-style@0.18.1) (2024-11-18) diff --git a/packages/style/package.json b/packages/style/package.json index 5636a6f255..80fa54a0fc 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.18.1", + "version": "0.19.0", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { diff --git a/packages/testkit/CHANGELOG.md b/packages/testkit/CHANGELOG.md index 14a92da187..43adc8485e 100644 --- a/packages/testkit/CHANGELOG.md +++ b/packages/testkit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.4](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.3...@vibe/testkit@1.0.4) (2024-11-19) + +**Note:** Version bump only for package @vibe/testkit + + + + + ## [1.0.3](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.2...@vibe/testkit@1.0.3) (2024-11-14) **Note:** Version bump only for package @vibe/testkit diff --git a/packages/testkit/package.json b/packages/testkit/package.json index 67c65c4454..035e97e699 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/testkit", - "version": "1.0.3", + "version": "1.0.4", "description": "Vibe e2e testing toolkit", "keywords": [ "TESTING", From cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Wed, 20 Nov 2024 12:14:15 +0200 Subject: [PATCH 11/26] feat(Switcher): update icon (#2599) --- packages/core/src/components/Icon/Icons/components/Switcher.tsx | 2 +- packages/style/src/Icons/Switcher.svg | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/Switcher.tsx b/packages/core/src/components/Icon/Icons/components/Switcher.tsx index 01fd7b4fc0..0ca8041213 100644 --- a/packages/core/src/components/Icon/Icons/components/Switcher.tsx +++ b/packages/core/src/components/Icon/Icons/components/Switcher.tsx @@ -7,7 +7,7 @@ size?: string | number; const Switcher: React.FC = ({size, ...props}) => ( - diff --git a/packages/style/src/Icons/Switcher.svg b/packages/style/src/Icons/Switcher.svg index 9c7e8eb251..8cbbb3e8ae 100644 --- a/packages/style/src/Icons/Switcher.svg +++ b/packages/style/src/Icons/Switcher.svg @@ -1,6 +1,6 @@ - + From 32fd1945b623e23f5cd36039b777eaf3182f6c95 Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Wed, 20 Nov 2024 10:29:53 +0000 Subject: [PATCH 12/26] Publish - monday-ui-react-core@2.147.0 - monday-ui-style@0.20.0 --- packages/core/CHANGELOG.md | 11 +++++++++++ packages/core/package.json | 4 ++-- packages/style/CHANGELOG.md | 11 +++++++++++ packages/style/package.json | 2 +- 4 files changed, 25 insertions(+), 3 deletions(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 81fceaed9a..9a0badd1a1 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [2.147.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.146.0...monday-ui-react-core@2.147.0) (2024-11-20) + + +### Features + +* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0)) + + + + + # [2.146.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.145.2...monday-ui-react-core@2.146.0) (2024-11-19) diff --git a/packages/core/package.json b/packages/core/package.json index a032b8d17d..06c6601741 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.146.0", + "version": "2.147.0", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", @@ -108,7 +108,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.19.0", + "monday-ui-style": "0.20.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^4.1.3", diff --git a/packages/style/CHANGELOG.md b/packages/style/CHANGELOG.md index c67ea6d104..da96bc1a6e 100644 --- a/packages/style/CHANGELOG.md +++ b/packages/style/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +# [0.20.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.19.0...monday-ui-style@0.20.0) (2024-11-20) + + +### Features + +* **Switcher:** update icon ([#2599](https://github.com/mondaycom/vibe/issues/2599)) ([cdac401](https://github.com/mondaycom/vibe/commit/cdac401ee11c14c2ae3ca2d4fe62aa579b2dd1c0)) + + + + + # [0.19.0](https://github.com/mondaycom/vibe/compare/monday-ui-style@0.18.1...monday-ui-style@0.19.0) (2024-11-19) diff --git a/packages/style/package.json b/packages/style/package.json index 80fa54a0fc..d9fc2a57fc 100644 --- a/packages/style/package.json +++ b/packages/style/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-style", - "version": "0.19.0", + "version": "0.20.0", "description": "Monday UI CSS Foundations", "main": "dist/index.css", "scripts": { From 3af508ade6f12076d7764168668545dcc43ffe4f Mon Sep 17 00:00:00 2001 From: uziab Date: Wed, 20 Nov 2024 15:57:12 +0200 Subject: [PATCH 13/26] chore: add d.ts file compilation to testkit (#2585) --- packages/testkit/__TESTS__/dropdown.spec.js | 4 +- packages/testkit/eslint.config.mjs | 6 +++ packages/testkit/package.json | 18 ++++++++- packages/testkit/tsconfig.esm.json | 8 ++++ packages/testkit/tsconfig.json | 45 +++++++++------------ 5 files changed, 51 insertions(+), 30 deletions(-) create mode 100644 packages/testkit/eslint.config.mjs create mode 100644 packages/testkit/tsconfig.esm.json diff --git a/packages/testkit/__TESTS__/dropdown.spec.js b/packages/testkit/__TESTS__/dropdown.spec.js index f2c04d4492..3db16d7a6e 100644 --- a/packages/testkit/__TESTS__/dropdown.spec.js +++ b/packages/testkit/__TESTS__/dropdown.spec.js @@ -13,7 +13,9 @@ test.describe("dropdown Class with Storybook", () => { }); test.fixme("set dropdown value", async ({ page }) => { - await page.waitForTimeout(3000); + // extended wait for interaction test to finish + await page.waitForTimeout(10000); + await DropDown.inputField.setText(""); await DropDown.selectItem("2"); await page.waitForTimeout(500); expect(await DropDown.getText()).toContain("2"); diff --git a/packages/testkit/eslint.config.mjs b/packages/testkit/eslint.config.mjs new file mode 100644 index 0000000000..53b77e189d --- /dev/null +++ b/packages/testkit/eslint.config.mjs @@ -0,0 +1,6 @@ +// eslint.config.js +export default [ +{ + ignores: ["node_modules/", "dist/", "*.config.js", "*.spec.js"], +} +]; \ No newline at end of file diff --git a/packages/testkit/package.json b/packages/testkit/package.json index 035e97e699..5df1de1f9d 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -6,6 +6,15 @@ "TESTING", "E2E" ], + "module": "dist/esm/index.js", + "types": "dist/index.d.ts", + "exports": { + ".": { + "require": "./dist/index.js", + "import": "./dist/esm/index.js", + "types": "./dist/index.d.ts" + } + }, "author": "monday.com", "homepage": "https://github.com/mondaycom/vibe#readme", "license": "ISC", @@ -17,13 +26,18 @@ }, "scripts": { "test:e2e": "npx playwright test", - "build": "tsc", - "start-server": "yarn lerna run storybook --scope=monday-ui-react-core" + "build:cjs": "tsc", + "build:esm": "tsc --project tsconfig.esm.json", + "build": "yarn build:cjs && yarn build:esm", + "start-server": "yarn lerna run storybook --scope=monday-ui-react-core", + "lint": "eslint \"./**/*.{js,jsx,ts,tsx}\"", + "lint:fix": "yarn lint -- --fix" }, "bugs": { "url": "https://github.com/mondaycom/vibe/issues" }, "devDependencies": { + "eslint": "^8.23.0", "@playwright/test": "1.45.3" } } diff --git a/packages/testkit/tsconfig.esm.json b/packages/testkit/tsconfig.esm.json new file mode 100644 index 0000000000..d9877bd4bc --- /dev/null +++ b/packages/testkit/tsconfig.esm.json @@ -0,0 +1,8 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "dist/esm", + "module": "esnext" + }, + "include": ["./**/*.ts"] + } \ No newline at end of file diff --git a/packages/testkit/tsconfig.json b/packages/testkit/tsconfig.json index 198d44ed7c..aa57a38526 100644 --- a/packages/testkit/tsconfig.json +++ b/packages/testkit/tsconfig.json @@ -1,28 +1,19 @@ { - "compilerOptions": { - "module": "commonjs", - "target": "es6", - "outDir": "dist", - "strict": true, - "sourceMap": true, - "strictNullChecks": true, - "moduleResolution": "node", - "importHelpers": true, - "esModuleInterop": true, - "skipLibCheck": true, - "forceConsistentCasingInFileNames": true, - "noUnusedLocals": true, - "noUnusedParameters": true, - "noFallthroughCasesInSwitch": true, - "strictBindCallApply": true, - "strictFunctionTypes": true, - "strictPropertyInitialization": true, - "rootDir": ".", - "declaration": false, - "downlevelIteration": true, - "experimentalDecorators": true, - "noImplicitOverride": true, - "noImplicitReturns": true, - }, - "include": [ "buttons", "inputs", "navigation", "pickers", "popover", "text", "utils", "BaseElement.ts", "index.ts"] - } + "compilerOptions": { + "lib": ["ESNext"], + "target": "es6", + "module": "commonjs", + "moduleResolution": "node", + "strict": true, + "skipLibCheck": true, + "noImplicitAny": true, + "outDir": "dist", + "baseUrl": ".", + "allowSyntheticDefaultImports": true, + "declaration": true, + "declarationMap": true, + "sourceMap": true + }, + "include": ["./**/*.ts"], + "exclude": ["__TESTS__", "./playwright.config.ts", "node_modules", "dist"] +} \ No newline at end of file From 00a99882b2cac739720dd9207a1379e28c2a77a0 Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Wed, 20 Nov 2024 15:17:19 +0000 Subject: [PATCH 14/26] Publish - @vibe/testkit@1.0.5 --- packages/testkit/CHANGELOG.md | 8 ++++++++ packages/testkit/package.json | 6 +++--- 2 files changed, 11 insertions(+), 3 deletions(-) diff --git a/packages/testkit/CHANGELOG.md b/packages/testkit/CHANGELOG.md index 43adc8485e..bd2ca2b0fc 100644 --- a/packages/testkit/CHANGELOG.md +++ b/packages/testkit/CHANGELOG.md @@ -3,6 +3,14 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.0.5](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.4...@vibe/testkit@1.0.5) (2024-11-20) + +**Note:** Version bump only for package @vibe/testkit + + + + + ## [1.0.4](https://github.com/mondaycom/vibe/compare/@vibe/testkit@1.0.3...@vibe/testkit@1.0.4) (2024-11-19) **Note:** Version bump only for package @vibe/testkit diff --git a/packages/testkit/package.json b/packages/testkit/package.json index 5df1de1f9d..e9719c84f6 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/testkit", - "version": "1.0.4", + "version": "1.0.5", "description": "Vibe e2e testing toolkit", "keywords": [ "TESTING", @@ -37,7 +37,7 @@ "url": "https://github.com/mondaycom/vibe/issues" }, "devDependencies": { - "eslint": "^8.23.0", - "@playwright/test": "1.45.3" + "@playwright/test": "1.45.3", + "eslint": "^8.23.0" } } From ad983408dcbdfc725f9106c0a314c7c84ffb66ec Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 08:59:55 +0200 Subject: [PATCH 15/26] fix(TextField): when inputValue is undefined, length check fails (#2603) --- packages/core/src/components/TextField/TextField.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/TextField/TextField.tsx b/packages/core/src/components/TextField/TextField.tsx index e958e6f870..6cc32df788 100644 --- a/packages/core/src/components/TextField/TextField.tsx +++ b/packages/core/src/components/TextField/TextField.tsx @@ -244,7 +244,7 @@ const TextField: VibeComponent & { }, [disabled, clearOnIconClick, onIconClick, currentStateIconName, controlled, onChangeCallback, clearValue]); const validationClass = useMemo(() => { - if (typeof maxLength === "number" && inputValue.length > maxLength) { + if (typeof maxLength === "number" && inputValue && inputValue.length > maxLength) { return FEEDBACK_CLASSES.error; } @@ -253,7 +253,7 @@ const TextField: VibeComponent & { } const status = isRequiredAndEmpty ? "error" : validation.status; return FEEDBACK_CLASSES[status]; - }, [validation, isRequiredAndEmpty, inputValue]); + }, [maxLength, validation, isRequiredAndEmpty, inputValue]); const hasIcon = iconName || secondaryIconName; const shouldShowExtraText = showCharCount || (validation && validation.text) || isRequiredAndEmpty; From 571e908bbc7e8647444026d08a6fe93a2c000330 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 09:00:06 +0200 Subject: [PATCH 16/26] fix(AvatarGroup): pass dialogContainerSelector from AvatarGroup to AvatarGroupCounter (#2602) --- .../core/src/components/AvatarGroup/AvatarGroup.tsx | 4 ++++ .../src/components/AvatarGroup/AvatarGroupCounter.tsx | 10 +++------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/core/src/components/AvatarGroup/AvatarGroup.tsx b/packages/core/src/components/AvatarGroup/AvatarGroup.tsx index 52582fc4f8..8ba88655a6 100644 --- a/packages/core/src/components/AvatarGroup/AvatarGroup.tsx +++ b/packages/core/src/components/AvatarGroup/AvatarGroup.tsx @@ -16,6 +16,10 @@ export type AvatarGroupCounterVisualProps = { maxDigits?: number; ariaLabelItemsName?: string; noAnimation?: boolean; + /** + * Relevant only for when AvatarGroup contains a clickable avatar + */ + dialogContainerSelector?: string; }; export interface AvatarGroupProps extends VibeComponentProps { diff --git a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx index 610b7b9d21..08ee8e06b4 100644 --- a/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx +++ b/packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx @@ -26,10 +26,6 @@ export interface AvatarGroupCounterProps extends VibeComponentProps { counterProps?: AvatarGroupCounterVisualProps; counterTooltipCustomProps?: Partial; counterTooltipIsVirtualizedList?: boolean; - /** - * Relevant only for when AvatarGroup contains a clickable avatar - */ - counterDialogContainerSelector?: string; size?: AvatarSize; type?: AvatarType; counterAriaLabel?: string; @@ -41,7 +37,6 @@ const AvatarGroupCounter: React.FC = ({ counterProps, counterTooltipCustomProps, counterTooltipIsVirtualizedList = false, - counterDialogContainerSelector, size = Avatar.sizes.MEDIUM, type, counterAriaLabel, @@ -53,7 +48,8 @@ const AvatarGroupCounter: React.FC = ({ prefix: counterPrefix = "+", maxDigits: counterMaxDigits = 3, ariaLabelItemsName: counterAriaLabelItemsName = "items", - noAnimation + noAnimation, + dialogContainerSelector } = counterProps || {}; const counterSizeStyle = getStyle(styles, size?.toString()); @@ -108,7 +104,7 @@ const AvatarGroupCounter: React.FC = ({ zIndex={1} className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)} ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`} - dialogContainerSelector={counterDialogContainerSelector} + dialogContainerSelector={dialogContainerSelector} > {counterTooltipAvatars.map((avatar, index) => { From ddd22e01f568f1dce6548d1701002fc1ed50e1da Mon Sep 17 00:00:00 2001 From: vibe-bot Date: Thu, 21 Nov 2024 07:15:01 +0000 Subject: [PATCH 17/26] Publish - monday-ui-react-core@2.147.1 --- packages/core/CHANGELOG.md | 12 ++++++++++++ packages/core/package.json | 2 +- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md index 9a0badd1a1..c952f11968 100644 --- a/packages/core/CHANGELOG.md +++ b/packages/core/CHANGELOG.md @@ -3,6 +3,18 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [2.147.1](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.147.0...monday-ui-react-core@2.147.1) (2024-11-21) + + +### Bug Fixes + +* **AvatarGroup:** pass dialogContainerSelector from AvatarGroup to AvatarGroupCounter ([#2602](https://github.com/mondaycom/vibe/issues/2602)) ([571e908](https://github.com/mondaycom/vibe/commit/571e908bbc7e8647444026d08a6fe93a2c000330)) +* **TextField:** when inputValue is undefined, length check fails ([#2603](https://github.com/mondaycom/vibe/issues/2603)) ([ad98340](https://github.com/mondaycom/vibe/commit/ad983408dcbdfc725f9106c0a314c7c84ffb66ec)) + + + + + # [2.147.0](https://github.com/mondaycom/vibe/compare/monday-ui-react-core@2.146.0...monday-ui-react-core@2.147.0) (2024-11-20) diff --git a/packages/core/package.json b/packages/core/package.json index 06c6601741..7e7bb91be9 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "monday-ui-react-core", - "version": "2.147.0", + "version": "2.147.1", "description": "Official monday.com UI resources for application development in React.js", "main": "./dist/main.js", "types": "./dist/types.d.ts", From 6a5598ca6ad50c2a383fcbe0657a80f138383d57 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:13:53 +0200 Subject: [PATCH 18/26] feat: new major version BREAKING CHANGE: new major version --- packages/icons/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/package.json b/packages/icons/package.json index 93f197690f..75d4a22c5b 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,7 +1,7 @@ { "name": "@vibe/icons", "version": "0.1.0", - "description": "Vibe's icon library", + "description": "Vibe's Icon Library", "repository": { "type": "git", "url": "git+https://github.com/mondaycom/vibe.git", From 9e869b7d800686683e4cd40e6df0514ee9667213 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:19:01 +0200 Subject: [PATCH 19/26] chore: release v1 --- packages/codemod/package.json | 2 +- packages/icons/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/codemod/package.json b/packages/codemod/package.json index af3bed79ce..48c23e418a 100644 --- a/packages/codemod/package.json +++ b/packages/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/codemod", - "version": "0.1.0", + "version": "1.0.0-rc.0", "description": "Vibe's component library migration tool", "repository": { "type": "git", diff --git a/packages/icons/package.json b/packages/icons/package.json index 75d4a22c5b..dbcea110cf 100644 --- a/packages/icons/package.json +++ b/packages/icons/package.json @@ -1,6 +1,6 @@ { "name": "@vibe/icons", - "version": "0.1.0", + "version": "1.0.0-rc.0", "description": "Vibe's Icon Library", "repository": { "type": "git", From 7e3071dbd4c5d8e3bddfafee5d802ee6930b2f6a Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:21:46 +0200 Subject: [PATCH 20/26] docs: migration guide --- .../storybook/stand-alone-documentaion/migration-guide.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx index 54f05c7868..f66bc5ec90 100644 --- a/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx +++ b/packages/core/src/storybook/stand-alone-documentaion/migration-guide.mdx @@ -45,9 +45,7 @@ The `monday-ui-react-core` package has been renamed to `@vibe/core` to better re ### Reduced bundle size -By removing CommonJS support, dividing the library into packages, and optimizing the library exports - the bundle size has been reduced to [fill in] kb, resulting in faster load times and improved performance. - -{/* bundle phobia image? */} +By removing CommonJS support, dividing the library into packages, and optimizing the library exports - the bundle size has been reduced by 43%, resulting in faster load times and improved performance. ### New Typography System From 34f79e2ff94689167d2d56308c606c65df22a7a0 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:23:07 +0200 Subject: [PATCH 21/26] docs: readme --- packages/codemod/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/codemod/README.md b/packages/codemod/README.md index 5fddb43000..eaf156da07 100644 --- a/packages/codemod/README.md +++ b/packages/codemod/README.md @@ -66,3 +66,9 @@ The following migrations are included in this CLI: - **Migration Type**: `v3` (`--migration v3`) - **Description**: This migration transforms components and files to comply with version 3 of @vibe/code. + +### `enums` Migration + +- **Migration Type**: `enums` (`--migration enums`) +- **Description**: This migration transforms enums to TS types with version 3 of @vibe/code. +- From 6ca3a782ae87366967d5163866c7ea5474d175ec Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:24:05 +0200 Subject: [PATCH 22/26] ci(release): add conventional graduate --- .github/workflows/release.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2d48262987..b5cf66b40a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -35,7 +35,7 @@ jobs: - uses: ./.github/actions/git-creds - uses: ./.github/actions/download-builds - name: Generate new versions - run: yarn lerna version --exact --conventional-commits -y + run: yarn lerna version --exact --conventional-commits --conventional-graduate -y - run: yarn config set registry https://registry.npmjs.org/ - name: Setup .npmrc for publish id: setup-npmrc From 643c31fef0f6f0dfe767a5758b751f908f602d18 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Thu, 21 Nov 2024 13:38:04 +0200 Subject: [PATCH 23/26] docs: readme --- packages/codemod/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/codemod/README.md b/packages/codemod/README.md index eaf156da07..edc53f782a 100644 --- a/packages/codemod/README.md +++ b/packages/codemod/README.md @@ -71,4 +71,3 @@ The following migrations are included in this CLI: - **Migration Type**: `enums` (`--migration enums`) - **Description**: This migration transforms enums to TS types with version 3 of @vibe/code. -- From 798497f869e509553206de040ead433e35a866f7 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 14:54:10 +0200 Subject: [PATCH 24/26] chore: standardize testkit package with lint, config, plugins (#2601) --- .github/workflows/test.yml | 7 +-- packages/testkit/.eslintrc.js | 59 +++++++++++++++++++ packages/testkit/BaseElement.ts | 43 ++++++++------ packages/testkit/__TESTS__/button.spec.js | 41 ------------- packages/testkit/__TESTS__/checkbox.spec.js | 24 -------- packages/testkit/__tests__/button.test.js | 43 ++++++++++++++ .../buttonGroup.test.js} | 8 +-- packages/testkit/__tests__/checkbox.test.js | 28 +++++++++ .../dropdown.test.js} | 3 +- .../menuButton.test.js} | 4 +- .../textArea.test.js} | 8 ++- .../textfield.test.js} | 8 ++- .../utils/url-helper.js | 1 - packages/testkit/buttons/Button.ts | 4 +- packages/testkit/buttons/ButtonGroup.ts | 13 ++-- packages/testkit/buttons/MenuButton.ts | 4 +- packages/testkit/buttons/SplitButton.ts | 6 +- packages/testkit/eslint.config.mjs | 6 -- packages/testkit/index.ts | 2 +- packages/testkit/navigation/List.ts | 2 +- packages/testkit/navigation/TabList.ts | 4 +- packages/testkit/package.json | 10 +++- packages/testkit/pickers/ColorPicker.ts | 4 +- packages/testkit/playwright.config.ts | 16 ++--- packages/testkit/popover/Dialog.ts | 2 +- packages/testkit/tsconfig.json | 5 +- yarn.lock | 40 +++++++++++-- 27 files changed, 251 insertions(+), 144 deletions(-) create mode 100644 packages/testkit/.eslintrc.js delete mode 100644 packages/testkit/__TESTS__/button.spec.js delete mode 100644 packages/testkit/__TESTS__/checkbox.spec.js create mode 100644 packages/testkit/__tests__/button.test.js rename packages/testkit/{__TESTS__/buttonGroup.spec.js => __tests__/buttonGroup.test.js} (89%) create mode 100644 packages/testkit/__tests__/checkbox.test.js rename packages/testkit/{__TESTS__/dropdown.spec.js => __tests__/dropdown.test.js} (81%) rename packages/testkit/{__TESTS__/menuButton.spec.js => __tests__/menuButton.test.js} (81%) rename packages/testkit/{__TESTS__/textArea.spec.js => __tests__/textArea.test.js} (76%) rename packages/testkit/{__TESTS__/textfield.spec.js => __tests__/textfield.test.js} (77%) rename packages/testkit/{__TESTS__ => __tests__}/utils/url-helper.js (99%) delete mode 100644 packages/testkit/eslint.config.mjs diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 93b39bc347..8a2d89ef31 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -40,8 +40,7 @@ jobs: SINCE_FLAG: ${{ steps.determine-since-flag.outputs.since_flag }} run: yarn lerna run ${{ matrix.command }} $SINCE_FLAG - tests_e2e: - name: Run end-to-end tests + e2e: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 @@ -56,7 +55,7 @@ jobs: - uses: ./.github/actions/download-builds - name: Install playwright browsers run: npx playwright install --with-deps - - name: Run tests + - name: Run e2e tests run: yarn lerna run test:e2e $SINCE_FLAG --scope "@vibe/testkit" - uses: actions/upload-artifact@v4 if: ${{ always() }} @@ -64,4 +63,4 @@ jobs: name: test-results path: | packages/testkit/reports - packages/testkit/test-results \ No newline at end of file + packages/testkit/test-results diff --git a/packages/testkit/.eslintrc.js b/packages/testkit/.eslintrc.js new file mode 100644 index 0000000000..4e7dd544f9 --- /dev/null +++ b/packages/testkit/.eslintrc.js @@ -0,0 +1,59 @@ +const defaultPlugins = ["prettier"]; +const defaultExtends = ["eslint:recommended", "plugin:prettier/recommended"]; +const defaultRules = { + "prettier/prettier": "error" +}; + +const commonJsPlugins = defaultPlugins; +const commonJsExtends = defaultExtends; +const commonJsRules = { + ...defaultRules, + "no-unused-vars": ["error", { argsIgnorePattern: "^_" }] +}; + +const commonTsPlugins = [...defaultPlugins, "@typescript-eslint"]; +const commonTsExtends = [...defaultExtends, "plugin:@typescript-eslint/recommended"]; +const commonTsRules = { + ...defaultRules, + "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }], + "@typescript-eslint/no-explicit-any": "warn" +}; + +module.exports = { + ignorePatterns: ["node_modules", "dist"], + parserOptions: { + sourceType: "module" + }, + env: { + es2021: true, + node: true + }, + overrides: [ + { + files: ["**/*.js"], + extends: commonJsExtends, + plugins: commonJsPlugins, + rules: commonJsRules + }, + { + files: ["**/*.ts"], + parser: "@typescript-eslint/parser", + plugins: commonTsPlugins, + extends: commonTsExtends, + rules: commonTsRules + }, + { + files: ["./__tests__/*.test.js"], + plugins: [...commonJsPlugins, "playwright"], + extends: [...commonJsExtends, "plugin:playwright/recommended"], + rules: commonJsRules + }, + { + files: ["./__tests__/*.test.ts"], + parser: "@typescript-eslint/parser", + plugins: [...commonTsPlugins, "playwright"], + extends: [...commonTsExtends, "plugin:playwright/recommended"], + rules: commonTsRules + } + ] +}; diff --git a/packages/testkit/BaseElement.ts b/packages/testkit/BaseElement.ts index ae77c4814b..a66d4ce0ad 100644 --- a/packages/testkit/BaseElement.ts +++ b/packages/testkit/BaseElement.ts @@ -4,16 +4,16 @@ import { test, Page, Locator } from "@playwright/test"; * Class representing a base element for Playwright tests. */ export class BaseElement { - page : Page; - locator : Locator; - elementReportName: String + page: Page; + locator: Locator; + elementReportName: string; /** * Create a BaseElement. * @param {Object} page - The Playwright page object. * @param {Object} locator - The locator for the element. * @param {string} elementReportName - The name for reporting purposes. */ - constructor(page: Page, locator: Locator, elementReportName: String) { + constructor(page: Page, locator: Locator, elementReportName: string) { this.page = page; this.locator = locator; this.elementReportName = elementReportName; @@ -31,11 +31,12 @@ export class BaseElement { * Wait for the list elements to stabilize (i.e., the count of items remains constant for a specified duration). * @returns {Promise} */ - async waitForElementsGroup(locator: Locator, elementReportName: String): Promise { + async waitForElementsGroup(locator: Locator, elementReportName: string): Promise { await test.step(`Wait for ${elementReportName} items to stabilize`, async () => { let previousCount = 0; let stableCountTime = 0; const stabilizationTimeMs = 500; + // eslint-disable-next-line no-constant-condition while (true) { const currentCount = await this.locator.locator(locator).count(); @@ -58,12 +59,12 @@ export class BaseElement { * @returns {Promise} - Returns true if the element is enabled, otherwise false. */ async isEnabled(): Promise { - let isEnabled: boolean = false; - await test.step(`Return if ${this.elementReportName} is enabled`, async () => { - isEnabled = await this.locator.isEnabled(); - return isEnabled; - }); + let isEnabled = false; + await test.step(`Return if ${this.elementReportName} is enabled`, async () => { + isEnabled = await this.locator.isEnabled(); return isEnabled; + }); + return isEnabled; } /** @@ -75,15 +76,19 @@ export class BaseElement { await this.locator.scrollIntoViewIfNeeded(); }); } - async getAttributeValue(attributeName: string, options: any = { timeout: 10000, pollInterval: 500 }) : Promise { + async getAttributeValue( + attributeName: string, + // eslint-disable-next-line @typescript-eslint/no-explicit-any + options: any = { timeout: 10000, pollInterval: 500 } + ): Promise { let attributeValue = null; - + await test.step(`Get attribute ${attributeName} of ${this.elementReportName}`, async () => { const startTime = Date.now(); - + while (Date.now() - startTime < options.timeout) { attributeValue = await this.locator.getAttribute(attributeName); - + if (attributeValue !== null) { break; } @@ -98,8 +103,8 @@ export class BaseElement { return attributeValue; } - async getText() : Promise { - let text: string|undefined; + async getText(): Promise { + let text: string | undefined; await test.step(`Get text of ${this.elementReportName}`, async () => { text = await this.locator.innerText(); return text; @@ -113,14 +118,14 @@ export class BaseElement { }); } - async waitForAbsence() : Promise{ + async waitForAbsence(): Promise { await test.step(`Wait for ${this.elementReportName} to be absent`, async () => { await this.waitFor({ state: "detached" }); }); } - async count() : Promise{ - let count: number=0; + async count(): Promise { + let count = 0; await test.step(`Count elements matching ${this.elementReportName}`, async () => { count = await this.locator.count(); }); diff --git a/packages/testkit/__TESTS__/button.spec.js b/packages/testkit/__TESTS__/button.spec.js deleted file mode 100644 index 1f3a94e435..0000000000 --- a/packages/testkit/__TESTS__/button.spec.js +++ /dev/null @@ -1,41 +0,0 @@ -import { test, expect } from '@playwright/test'; -import { Button } from '../buttons/Button'; -import { buttonStory } from './utils/url-helper'; - -test('should fire a click event and log to console', async ({ page }) => { - // Navigate to the Storybook page with the component - await page.goto(buttonStory, {timeout: 100000}); - // Locate the iframe where the button is rendered - const frame = page.frameLocator("[id='storybook-preview-iframe']"); - const button = new Button(page, frame.locator('button[data-testid="button"]'), 'Button'); - - //TODO - find a better way to wait for the storybook to load - while (await button.locator.isVisible() === false) { - await page.waitForTimeout(30000); - await page.reload(); - if (await button.locator.isVisible() === true) { - break; - } - } - // Add a listener to capture console logs - let consoleMessage = ''; - page.on('console', async (msg) => { - const values = await Promise.all(msg.args().map(arg => arg.jsonValue())); - consoleMessage = values.join(' '); - }); - - // Attach a click event listener that logs a message to the console - await button.locator.evaluate((buttonElement) => { - buttonElement.addEventListener('click', () => { - console.log('Button clicked'); // Log to console when clicked - }); - }); - // Click the button - await button.click(); - - // Wait a bit to ensure the console log is captured - await page.waitForTimeout(500); - - // Verify the console log contains the expected message - expect(consoleMessage).toContain('Button clicked'); -}); diff --git a/packages/testkit/__TESTS__/checkbox.spec.js b/packages/testkit/__TESTS__/checkbox.spec.js deleted file mode 100644 index 6c03dfbeee..0000000000 --- a/packages/testkit/__TESTS__/checkbox.spec.js +++ /dev/null @@ -1,24 +0,0 @@ -import { test, expect } from "@playwright/test"; -import { Checkbox } from "../inputs/Checkbox"; -import { checkboxStory } from "./utils/url-helper"; - -test.describe("menuButton Class with Storybook", () => { - let checkbox; - - test.beforeEach(async ({ page }) => { - await page.goto(checkboxStory); - const frame = page.frameLocator("[id='storybook-preview-iframe']"); - const checkboxLocator = frame.locator('[data-testid="checkbox-checkbox"]'); - checkbox = new Checkbox(page, checkboxLocator, "Test checkbox button"); - }); - - test("set checkbox", async ({page}) => { - if (await checkbox.isChecked()){ - await checkbox.setChecked(false); - expect(await checkbox.isChecked()).toBe(false); - }else { - await checkbox.setChecked(true); - expect(await checkbox.isChecked()).toBe(true); - } - }); -}); \ No newline at end of file diff --git a/packages/testkit/__tests__/button.test.js b/packages/testkit/__tests__/button.test.js new file mode 100644 index 0000000000..7f60935877 --- /dev/null +++ b/packages/testkit/__tests__/button.test.js @@ -0,0 +1,43 @@ +import { test, expect } from "@playwright/test"; +import { Button } from "../buttons/Button"; +import { buttonStory } from "./utils/url-helper"; + +test("should fire a click event and log to console", async ({ page }) => { + // Navigate to the Storybook page with the component + await page.goto(buttonStory, { timeout: 100000 }); + // Locate the iframe where the button is rendered + const frame = page.frameLocator("[id='storybook-preview-iframe']"); + const button = new Button(page, frame.locator('button[data-testid="button"]'), "Button"); + + //TODO - find a better way to wait for the storybook to load + while ((await button.locator.isVisible()) === false) { + // eslint-disable-next-line playwright/no-wait-for-timeout + await page.waitForTimeout(30000); + await page.reload(); + // eslint-disable-next-line playwright/no-conditional-in-test + if ((await button.locator.isVisible()) === true) { + break; + } + } + // Add a listener to capture console logs + let consoleMessage = ""; + page.on("console", async msg => { + const values = await Promise.all(msg.args().map(arg => arg.jsonValue())); + consoleMessage = values.join(" "); + }); + + // Attach a click event listener that logs a message to the console + await button.locator.evaluate(buttonElement => { + buttonElement.addEventListener("click", () => { + console.log("Button clicked"); // Log to console when clicked + }); + }); + // Click the button + await button.click(); + + // eslint-disable-next-line playwright/no-wait-for-timeout -- Wait a bit to ensure the console log is captured + await page.waitForTimeout(500); + + // Verify the console log contains the expected message + expect(consoleMessage).toContain("Button clicked"); +}); diff --git a/packages/testkit/__TESTS__/buttonGroup.spec.js b/packages/testkit/__tests__/buttonGroup.test.js similarity index 89% rename from packages/testkit/__TESTS__/buttonGroup.spec.js rename to packages/testkit/__tests__/buttonGroup.test.js index ba07572ca8..ad6e4c62d5 100644 --- a/packages/testkit/__TESTS__/buttonGroup.spec.js +++ b/packages/testkit/__tests__/buttonGroup.test.js @@ -2,7 +2,6 @@ import { test, expect } from "@playwright/test"; import { ButtonGroup } from "../buttons/ButtonGroup"; import { buttonGroupStory } from "./utils/url-helper"; - test.describe("ButtonGroup Class with Storybook", () => { let buttonGroup; @@ -15,10 +14,11 @@ test.describe("ButtonGroup Class with Storybook", () => { // Locate the button group inside the iframe const buttonGroupLocator = frame.locator('div[data-testid="button-group"]'); - while (await buttonGroupLocator.isVisible() === false) { + while ((await buttonGroupLocator.isVisible()) === false) { + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(30000); await page.reload(); - if (await buttonGroupLocator.isVisible() === true) { + if ((await buttonGroupLocator.isVisible()) === true) { break; } } @@ -60,7 +60,7 @@ test.describe("ButtonGroup Class with Storybook", () => { // Click the button await buttonGroup.click("Beta"); - // Wait a bit to ensure the console log is captured + // eslint-disable-next-line playwright/no-wait-for-timeout -- Wait a bit to ensure the console log is captured await page.waitForTimeout(500); // Verify the console message contains the expected log diff --git a/packages/testkit/__tests__/checkbox.test.js b/packages/testkit/__tests__/checkbox.test.js new file mode 100644 index 0000000000..d1286d7122 --- /dev/null +++ b/packages/testkit/__tests__/checkbox.test.js @@ -0,0 +1,28 @@ +import { test, expect } from "@playwright/test"; +import { Checkbox } from "../inputs/Checkbox"; +import { checkboxStory } from "./utils/url-helper"; + +test.describe("menuButton Class with Storybook", () => { + let checkbox; + + test.beforeEach(async ({ page }) => { + await page.goto(checkboxStory); + const frame = page.frameLocator("[id='storybook-preview-iframe']"); + const checkboxLocator = frame.locator('[data-testid="checkbox-checkbox"]'); + checkbox = new Checkbox(page, checkboxLocator, "Test checkbox button"); + }); + + // eslint-disable-next-line no-unused-vars + test("set checkbox", async ({ page }) => { + // eslint-disable-next-line playwright/no-conditional-in-test + if (await checkbox.isChecked()) { + await checkbox.setChecked(false); + // eslint-disable-next-line playwright/prefer-web-first-assertions, playwright/no-conditional-expect + expect(await checkbox.isChecked()).toBe(false); + } else { + await checkbox.setChecked(true); + // eslint-disable-next-line playwright/prefer-web-first-assertions, playwright/no-conditional-expect + expect(await checkbox.isChecked()).toBe(true); + } + }); +}); diff --git a/packages/testkit/__TESTS__/dropdown.spec.js b/packages/testkit/__tests__/dropdown.test.js similarity index 81% rename from packages/testkit/__TESTS__/dropdown.spec.js rename to packages/testkit/__tests__/dropdown.test.js index 3db16d7a6e..3723dfe173 100644 --- a/packages/testkit/__TESTS__/dropdown.spec.js +++ b/packages/testkit/__tests__/dropdown.test.js @@ -13,10 +13,11 @@ test.describe("dropdown Class with Storybook", () => { }); test.fixme("set dropdown value", async ({ page }) => { - // extended wait for interaction test to finish + // eslint-disable-next-line playwright/no-wait-for-timeout -- extended wait for interaction test to finish await page.waitForTimeout(10000); await DropDown.inputField.setText(""); await DropDown.selectItem("2"); + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(500); expect(await DropDown.getText()).toContain("2"); }); diff --git a/packages/testkit/__TESTS__/menuButton.spec.js b/packages/testkit/__tests__/menuButton.test.js similarity index 81% rename from packages/testkit/__TESTS__/menuButton.spec.js rename to packages/testkit/__tests__/menuButton.test.js index 42efcc601f..1f45a6bb45 100644 --- a/packages/testkit/__TESTS__/menuButton.spec.js +++ b/packages/testkit/__tests__/menuButton.test.js @@ -12,11 +12,13 @@ test.describe("menuButton Class with Storybook", () => { menuButton = new MenuButton(page, menubuttonLocator, "Test menu button"); }); - test("should open and close menu", async ({page}) => { + test("should open and close menu", async ({ page }) => { await menuButton.openMenu(); + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(500); expect(await menuButton.isExpanded()).toBe(true); await menuButton.closeMenu(); + // eslint-disable-next-line playwright/no-wait-for-timeout await page.waitForTimeout(500); expect(await menuButton.isExpanded()).toBe(false); }); diff --git a/packages/testkit/__TESTS__/textArea.spec.js b/packages/testkit/__tests__/textArea.test.js similarity index 76% rename from packages/testkit/__TESTS__/textArea.spec.js rename to packages/testkit/__tests__/textArea.test.js index c57cc2b33f..75f4f4e4a8 100644 --- a/packages/testkit/__TESTS__/textArea.spec.js +++ b/packages/testkit/__tests__/textArea.test.js @@ -4,7 +4,7 @@ import { textAreaStory } from "./utils/url-helper"; test.describe("textArea Class with Storybook", () => { let textArea; - let textAreaLocator + let textAreaLocator; test.beforeEach(async ({ page }) => { await page.goto(textAreaStory); @@ -13,8 +13,10 @@ test.describe("textArea Class with Storybook", () => { textArea = new TextArea(page, textAreaLocator, "Test text field"); }); - test("set text in textarea", async ({page}) => { + // eslint-disable-next-line no-unused-vars + test("set text in textarea", async ({ page }) => { await textArea.setText("Test Text"); + // eslint-disable-next-line playwright/missing-playwright-await expect(textArea.textAreaInput.locator).toHaveValue("Test Text"); }); -}); \ No newline at end of file +}); diff --git a/packages/testkit/__TESTS__/textfield.spec.js b/packages/testkit/__tests__/textfield.test.js similarity index 77% rename from packages/testkit/__TESTS__/textfield.spec.js rename to packages/testkit/__tests__/textfield.test.js index b8235a2e61..2418126b83 100644 --- a/packages/testkit/__TESTS__/textfield.spec.js +++ b/packages/testkit/__tests__/textfield.test.js @@ -4,7 +4,7 @@ import { textfieldStory } from "./utils/url-helper"; test.describe("textArea Class with Storybook", () => { let textField; - let textfieldLocator + let textfieldLocator; test.beforeEach(async ({ page }) => { await page.goto(textfieldStory); @@ -13,9 +13,11 @@ test.describe("textArea Class with Storybook", () => { textField = new TextField(page, textfieldLocator, "Test text field"); }); - test("set text in text field", async ({page}) => { + // eslint-disable-next-line no-unused-vars + test("set text in text field", async ({ page }) => { await textField.setText("Test Text"); await textField.exitEditMode(); + // eslint-disable-next-line playwright/missing-playwright-await expect(textField.locator).toHaveValue("Test Text"); }); -}); \ No newline at end of file +}); diff --git a/packages/testkit/__TESTS__/utils/url-helper.js b/packages/testkit/__tests__/utils/url-helper.js similarity index 99% rename from packages/testkit/__TESTS__/utils/url-helper.js rename to packages/testkit/__tests__/utils/url-helper.js index 22817cb5a6..6b9c70b216 100644 --- a/packages/testkit/__TESTS__/utils/url-helper.js +++ b/packages/testkit/__tests__/utils/url-helper.js @@ -5,4 +5,3 @@ export const dropdownStory = "/?path=/story/inputs-dropdown--overview"; export const menuButtonStory = "/?path=/story/buttons-menubutton--overview"; export const textAreaStory = "/?path=/story/inputs-textarea--overview"; export const textfieldStory = "/?path=/story/inputs-textfield--overview"; - diff --git a/packages/testkit/buttons/Button.ts b/packages/testkit/buttons/Button.ts index 796d4c21d6..bcf33bcba8 100644 --- a/packages/testkit/buttons/Button.ts +++ b/packages/testkit/buttons/Button.ts @@ -7,7 +7,7 @@ import { BaseElement } from "../BaseElement"; * Extends the BaseElement class. */ export class Button extends BaseElement { - override page : Page; + override page: Page; override locator: Locator; override elementReportName: string; /** @@ -27,7 +27,7 @@ export class Button extends BaseElement { * Execute click action on the element. * @returns {Promise} */ - async click() : Promise { + async click(): Promise { await test.step(`Click on: ${this.elementReportName}`, async () => { await this.locator.click(); }); diff --git a/packages/testkit/buttons/ButtonGroup.ts b/packages/testkit/buttons/ButtonGroup.ts index c7b6145878..75da7dbf37 100644 --- a/packages/testkit/buttons/ButtonGroup.ts +++ b/packages/testkit/buttons/ButtonGroup.ts @@ -7,14 +7,12 @@ import { Button } from "./Button"; * Extends the BaseElement class. */ export class ButtonGroup extends BaseElement { - - override page : Page; + override page: Page; override locator: Locator; override elementReportName: string; items: Button[]; buttonsInitialized: boolean; - constructor(page: Page, locator: Locator, elementReportName: string) { super(page, locator, elementReportName); this.page = page; @@ -54,13 +52,12 @@ export class ButtonGroup extends BaseElement { }); } - /** * Get a button by its name. * @param {string} buttonName - The name of the button to retrieve. * @returns {Button} The button with the specified name. */ - getButtonByName(buttonName: string): Button|undefined { + getButtonByName(buttonName: string): Button | undefined { if (!buttonName || typeof buttonName !== "string") { throw new Error("Invalid button name provided"); } @@ -75,14 +72,14 @@ export class ButtonGroup extends BaseElement { */ async click(buttonName: string): Promise { await this.initializeButtonsIfNeeded(); - + const button = this.getButtonByName(buttonName); - + // Throw an error if the button is not found if (!button) { throw new Error(`Invalid button name provided: ${buttonName}`); } - + await button.click(); } } diff --git a/packages/testkit/buttons/MenuButton.ts b/packages/testkit/buttons/MenuButton.ts index 964eada883..05b4f14942 100644 --- a/packages/testkit/buttons/MenuButton.ts +++ b/packages/testkit/buttons/MenuButton.ts @@ -9,7 +9,8 @@ export class MenuButton extends Button { override locator: Locator; override elementReportName: string; button: Button; - menu: any; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + menu: any; /** * Create a MenuButton. @@ -18,6 +19,7 @@ export class MenuButton extends Button { * @param {string} elementReportName - The name for reporting purposes. * @param {any} menuType - The type of menu associated with the button. */ + // eslint-disable-next-line @typescript-eslint/no-explicit-any constructor(page: Page, locator: Locator, elementReportName: string, menuType: any) { super(page, locator, elementReportName); this.page = page; diff --git a/packages/testkit/buttons/SplitButton.ts b/packages/testkit/buttons/SplitButton.ts index 434df0f077..729774dedd 100644 --- a/packages/testkit/buttons/SplitButton.ts +++ b/packages/testkit/buttons/SplitButton.ts @@ -5,9 +5,9 @@ import { Button } from "./Button"; * Class representing a split button that extends the Button class. */ export class SplitButton extends Button { - override page: Page; - override locator: Locator; - override elementReportName: string; + override page: Page; + override locator: Locator; + override elementReportName: string; /** * Create a SplitButton. diff --git a/packages/testkit/eslint.config.mjs b/packages/testkit/eslint.config.mjs deleted file mode 100644 index 53b77e189d..0000000000 --- a/packages/testkit/eslint.config.mjs +++ /dev/null @@ -1,6 +0,0 @@ -// eslint.config.js -export default [ -{ - ignores: ["node_modules/", "dist/", "*.config.js", "*.spec.js"], -} -]; \ No newline at end of file diff --git a/packages/testkit/index.ts b/packages/testkit/index.ts index b903f04a4b..c74e1ef1eb 100644 --- a/packages/testkit/index.ts +++ b/packages/testkit/index.ts @@ -5,4 +5,4 @@ export * from "./navigation"; export * from "./popover"; export * from "./text"; export * from "./utils/common-actions"; -export * from "./BaseElement"; \ No newline at end of file +export * from "./BaseElement"; diff --git a/packages/testkit/navigation/List.ts b/packages/testkit/navigation/List.ts index 7d4ba00093..531d95fb5d 100644 --- a/packages/testkit/navigation/List.ts +++ b/packages/testkit/navigation/List.ts @@ -76,4 +76,4 @@ export class List extends BaseElement { await item.scrollIntoView(); await item.click(); } -} \ No newline at end of file +} diff --git a/packages/testkit/navigation/TabList.ts b/packages/testkit/navigation/TabList.ts index af5b1eb19e..064465e707 100644 --- a/packages/testkit/navigation/TabList.ts +++ b/packages/testkit/navigation/TabList.ts @@ -7,7 +7,7 @@ import { Tab } from "./Tab"; * Extends the BaseElement class. */ export class TabList extends BaseElement { - private items: Tab[]; // List of tabs + private items: Tab[]; // List of tabs private tabsInitialized: boolean; /** @@ -44,7 +44,7 @@ export class TabList extends BaseElement { await this.waitForElementsGroup(this.locator.locator("li"), this.elementReportName); const tabElements = await this.locator.locator("li").all(); this.items = await Promise.all( - tabElements.map(async (locator) => { + tabElements.map(async locator => { const tabName = await locator.innerText(); return new Tab(this.page, locator.getByText(`${tabName}`), `Tab Item: ${tabName}`); }) diff --git a/packages/testkit/package.json b/packages/testkit/package.json index e9719c84f6..f1a504d5cd 100644 --- a/packages/testkit/package.json +++ b/packages/testkit/package.json @@ -30,7 +30,7 @@ "build:esm": "tsc --project tsconfig.esm.json", "build": "yarn build:cjs && yarn build:esm", "start-server": "yarn lerna run storybook --scope=monday-ui-react-core", - "lint": "eslint \"./**/*.{js,jsx,ts,tsx}\"", + "lint": "eslint . --max-warnings=0", "lint:fix": "yarn lint -- --fix" }, "bugs": { @@ -38,6 +38,12 @@ }, "devDependencies": { "@playwright/test": "1.45.3", - "eslint": "^8.23.0" + "@typescript-eslint/eslint-plugin": "^5.36.1", + "@typescript-eslint/parser": "^5.36.1", + "eslint": "^8.23.0", + "eslint-config-prettier": "^8.3.0", + "eslint-plugin-playwright": "^2.1.0", + "eslint-plugin-prettier": "^4.0.0", + "prettier": "^2.5.1" } } diff --git a/packages/testkit/pickers/ColorPicker.ts b/packages/testkit/pickers/ColorPicker.ts index e45a501f59..3abfbc4774 100644 --- a/packages/testkit/pickers/ColorPicker.ts +++ b/packages/testkit/pickers/ColorPicker.ts @@ -33,7 +33,7 @@ export class ColorPicker extends BaseElement { * Get the currently selected color. * @returns {Promise} The selected color. */ - async getSelectedColor(): Promise { + async getSelectedColor(): Promise { const selectedColor = new BaseElement( this.page, this.locator.locator("//*[contains(@class, 'selectedColor')]"), @@ -41,6 +41,6 @@ export class ColorPicker extends BaseElement { ); const dataTestIdAttr = await selectedColor.getAttributeValue("data-testId"); const parts = dataTestIdAttr?.split("_"); - return parts?.slice(-2).join("_"); // Returning the last two parts as the selected color + return parts?.slice(-2).join("_"); // Returning the last two parts as the selected color } } diff --git a/packages/testkit/playwright.config.ts b/packages/testkit/playwright.config.ts index 2fbc9db00c..2ee1b108d2 100644 --- a/packages/testkit/playwright.config.ts +++ b/packages/testkit/playwright.config.ts @@ -1,4 +1,4 @@ -import { defineConfig } from '@playwright/test'; +import { defineConfig } from "@playwright/test"; import path from "path"; /** @@ -8,17 +8,17 @@ export default defineConfig({ fullyParallel: false, workers: 1, reporter: [["html", { open: "never", outputFolder: path.join(process.cwd(), "/reports") }]], - + // Run your local dev server before starting the tests webServer: { - command: 'yarn start-server', - url: 'http://127.0.0.1:7008', + command: "yarn start-server", + url: "http://127.0.0.1:7008", reuseExistingServer: !process.env.CI, timeout: 120 * 1000, - stdout: 'ignore', - stderr: 'pipe', + stdout: "ignore", + stderr: "pipe" }, - + use: { headless: true, baseURL: "http://127.0.0.1:7008", @@ -30,5 +30,5 @@ export default defineConfig({ args: ["--disable-web-security"] } }, - timeout: 180 * 1000, + timeout: 180 * 1000 }); diff --git a/packages/testkit/popover/Dialog.ts b/packages/testkit/popover/Dialog.ts index d45f52a384..e552b4d7c6 100644 --- a/packages/testkit/popover/Dialog.ts +++ b/packages/testkit/popover/Dialog.ts @@ -1,6 +1,6 @@ import { Page, Locator } from "@playwright/test"; import { BaseElement } from "../BaseElement"; -import { Button } from "../buttons/Button"; +import { Button } from "../buttons/Button"; /** * Class representing a Dialog element. diff --git a/packages/testkit/tsconfig.json b/packages/testkit/tsconfig.json index aa57a38526..848b3eb15a 100644 --- a/packages/testkit/tsconfig.json +++ b/packages/testkit/tsconfig.json @@ -15,5 +15,6 @@ "sourceMap": true }, "include": ["./**/*.ts"], - "exclude": ["__TESTS__", "./playwright.config.ts", "node_modules", "dist"] -} \ No newline at end of file + "exclude": [ + "__tests__", "./playwright.config.ts", "node_modules", "dist"] +} diff --git a/yarn.lock b/yarn.lock index 944825241f..483a0df70d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9494,6 +9494,13 @@ eslint-plugin-only-warn@^1.0.3: resolved "https://registry.npmjs.org/eslint-plugin-only-warn/-/eslint-plugin-only-warn-1.1.0.tgz#c6ddc37ddc4e72c121f07be565fcb7b6671fe78a" integrity sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA== +eslint-plugin-playwright@^2.1.0: + version "2.1.0" + resolved "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-2.1.0.tgz#9d84b5d839226e1f9ac926663baee29d103dcc99" + integrity sha512-wMbHOehofSB1cBdzz2CLaCYaKNLeTQ0YnOW+7AHa281TJqlpEJUBgTHbRUYOUxiXphfWwOyTPvgr6vvEmArbSA== + dependencies: + globals "^13.23.0" + eslint-plugin-prettier@^4.0.0: version "4.2.1" resolved "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b" @@ -10733,7 +10740,7 @@ globals@^11.1.0: resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e" integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA== -globals@^13.19.0: +globals@^13.19.0, globals@^13.23.0: version "13.24.0" resolved "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171" integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ== @@ -18467,7 +18474,16 @@ string-length@^4.0.1: char-regex "^1.0.2" strip-ansi "^6.0.0" -"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -18553,7 +18569,7 @@ stringify-entities@^4.0.0: character-entities-html4 "^2.0.0" character-entities-legacy "^3.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -18574,6 +18590,13 @@ strip-ansi@^5.2.0: dependencies: ansi-regex "^4.1.0" +strip-ansi@^6.0.0, strip-ansi@^6.0.1: + version "6.0.1" + resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + strip-ansi@^7.0.1, strip-ansi@^7.1.0: version "7.1.0" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45" @@ -20416,7 +20439,7 @@ workerpool@6.2.1: resolved "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz#46fc150c17d826b86a008e5a4508656777e9c343" integrity sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -20434,6 +20457,15 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214" From 01a677ab1665cbb34c1a975663fb7195e2adf3df Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Thu, 21 Nov 2024 15:29:09 +0200 Subject: [PATCH 25/26] feat(Search): allow tracking Enter key press (#2600) --- .../core/src/components/Search/Search.tsx | 9 +++-- .../src/components/Search/Search.types.ts | 6 +++- .../Search/__tests__/Search.test.tsx | 36 ++++++++++++++++--- 3 files changed, 41 insertions(+), 10 deletions(-) diff --git a/packages/core/src/components/Search/Search.tsx b/packages/core/src/components/Search/Search.tsx index 62257d38c5..490f697e68 100644 --- a/packages/core/src/components/Search/Search.tsx +++ b/packages/core/src/components/Search/Search.tsx @@ -35,6 +35,7 @@ const Search = forwardRef( onFocus, onBlur, onClear, + onKeyDown, className, ariaExpanded, ariaHasPopup, @@ -53,14 +54,11 @@ const Search = forwardRef( }); const onClearButtonClick = useCallback(() => { - if (disabled) { - return; - } - + if (disabled) return; inputRef.current?.focus?.(); clearValue(); onClear?.(); - }, [disabled, clearValue]); + }, [disabled, clearValue, onClear]); const SearchIcon = ( void; + /** + * Callback function that is called when a keyboard key is down. + */ + onKeyDown?: (event: React.KeyboardEvent) => void; } diff --git a/packages/core/src/components/Search/__tests__/Search.test.tsx b/packages/core/src/components/Search/__tests__/Search.test.tsx index ec50361156..79a0c397b7 100644 --- a/packages/core/src/components/Search/__tests__/Search.test.tsx +++ b/packages/core/src/components/Search/__tests__/Search.test.tsx @@ -24,19 +24,19 @@ describe("Search", () => { expect(queryByLabelText("Clear")).toBeNull(); }); - it("should display both the search icon and clear icon when input has value", async () => { + it("should display both the search icon and clear icon when input has value", () => { const { getByTestId, getAllByTestId } = renderSearch({ value: "Test" }); expect(getAllByTestId("icon")).toHaveLength(2); expect(getByTestId("clean-search-button")).toBeInTheDocument(); }); - it("should clear the input value when the clear icon is clicked", async () => { + it("should clear the input value when the clear icon is clicked", () => { const { getByRole, getByLabelText } = renderSearch({ value: "Test" }); userEvent.click(getByLabelText("Clear")); expect(getByRole("searchbox")).toHaveValue(""); }); - it("should display the clear icon once user inputs", async () => { + it("should display the clear icon once user inputs", () => { const { getByRole, getByTestId } = renderSearch(); userEvent.type(getByRole("searchbox"), "Test"); expect(getByTestId("clean-search-button")).toBeInTheDocument(); @@ -63,7 +63,7 @@ describe("Search", () => { expect(onClear).toHaveBeenCalled; }); - it("should debounce the onChange call", async () => { + it("should debounce the onChange call", () => { jest.useFakeTimers(); const onChange = jest.fn(); @@ -153,5 +153,33 @@ describe("Search", () => { userEvent.tab(); expect(onBlur).toHaveBeenCalled(); }); + + it("should call onKeyDown when Enter key is pressed", () => { + const onKeyDown = jest.fn(); + const { getByRole } = renderSearch({ onKeyDown }); + const input = getByRole("searchbox"); + userEvent.click(input); + userEvent.keyboard("{Enter}"); + expect(onKeyDown).toHaveBeenCalledTimes(1); + }); + + it("should not call onKeyDown when input is disabled", () => { + const onKeyDown = jest.fn(); + const { getByRole } = renderSearch({ onKeyDown, disabled: true }); + const input = getByRole("searchbox"); + userEvent.click(input); + userEvent.keyboard("{Enter}"); + expect(onKeyDown).not.toHaveBeenCalled(); + }); + + it("should call onKeyDown for each character when input is typed with content", () => { + const onKeyDown = jest.fn(); + const string = "Hello, World!"; + const { getByRole } = renderSearch({ onKeyDown }); + const input = getByRole("searchbox"); + userEvent.click(input); + userEvent.type(input, string); + expect(onKeyDown).toHaveBeenCalledTimes(string.length); + }); }); }); From 9a7bad770bd5966210684236663de577345c5a5a Mon Sep 17 00:00:00 2001 From: Rivka Ungar Date: Thu, 21 Nov 2024 15:44:05 +0200 Subject: [PATCH 26/26] fix(TextSmall): fix icon (#2604) --- .../core/src/components/Icon/Icons/components/TextSmall.tsx | 3 +-- packages/style/src/Icons/TextSmall.svg | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/Icon/Icons/components/TextSmall.tsx b/packages/core/src/components/Icon/Icons/components/TextSmall.tsx index 0bf5148eff..aa8f163274 100644 --- a/packages/core/src/components/Icon/Icons/components/TextSmall.tsx +++ b/packages/core/src/components/Icon/Icons/components/TextSmall.tsx @@ -6,8 +6,7 @@ size?: string | number; } const TextSmall: React.FC = ({size, ...props}) => ( - + ); TextSmall.displayName = 'TextSmall'; diff --git a/packages/style/src/Icons/TextSmall.svg b/packages/style/src/Icons/TextSmall.svg index 6a54ad7b04..4a1a7a5a4f 100644 --- a/packages/style/src/Icons/TextSmall.svg +++ b/packages/style/src/Icons/TextSmall.svg @@ -1,3 +1,3 @@ - - + +