Vibe3 fix build

.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,12 +55,12 @@ 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() }}
         with:
           name: test-results    
           path: |
             packages/testkit/reports
-            packages/testkit/test-results
+            packages/testkit/test-results

packages/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/codemod",
-  "version": "1.0.0-rc.0",
+  "version": "0.1.0",
   "description": "Vibe's component library migration tool",
   "repository": {
     "type": "git",

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/[email protected]@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/[email protected]@2.147.0) (2024-11-20)
 
 

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/core",
-  "version": "3.0.0-rc.0",
+  "version": "3.0.0-rc.1",
   "description": "Official monday.com UI resources for application development in React.js",
   "repository": {
     "type": "git",
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "@vibe/icons": "^0.1.0",
+    "@vibe/icons": "0.1.1-alpha.0",
     "a11y-dialog": "^7.5.2",
     "body-scroll-lock": "^4.0.0-beta.0",
     "browserslist-config-monday": "1.0.6",

packages/core/src/components/AvatarGroup/AvatarGroup.types.ts

@@ -7,4 +7,8 @@ export type AvatarGroupCounterVisualProps = {
   maxDigits?: number;
   ariaLabelItemsName?: string;
   noAnimation?: boolean;
+  /**
+   * Relevant only for when AvatarGroup contains a clickable avatar
+   */
+  dialogContainerSelector?: string;
 };

packages/core/src/components/AvatarGroup/AvatarGroupCounter.tsx

@@ -26,10 +26,6 @@ export interface AvatarGroupCounterProps extends VibeComponentProps {
   counterProps?: AvatarGroupCounterVisualProps;
   counterTooltipCustomProps?: Partial<TooltipProps>;
   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<AvatarGroupCounterProps> = ({
   counterProps,
   counterTooltipCustomProps,
   counterTooltipIsVirtualizedList = false,
-  counterDialogContainerSelector,
   size = "medium",
   type,
   counterAriaLabel,
@@ -53,7 +48,8 @@ const AvatarGroupCounter: React.FC<AvatarGroupCounterProps> = ({
     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<AvatarGroupCounterProps> = ({
         zIndex={1}
         className={cx(styles.counterContainer, counterSizeStyle, counterColorStyle)}
         ariaLabel={counterAriaLabel ? counterAriaLabel : `${counterValue} additional ${counterAriaLabelItemsName}`}
-        dialogContainerSelector={counterDialogContainerSelector}
+        dialogContainerSelector={dialogContainerSelector}
       >
         <Menu id="menu" size={Menu.sizes.MEDIUM} className={styles.menu} focusItemIndexOnMount={0}>
           {counterTooltipAvatars.map((avatar, index) => {

packages/core/src/components/Search/Search.tsx

@@ -34,6 +34,7 @@ const Search = forwardRef(
       onFocus,
       onBlur,
       onClear,
+      onKeyDown,
       className,
       ariaExpanded,
       ariaHasPopup,
@@ -52,14 +53,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 = (
       <Icon
@@ -112,6 +110,7 @@ const Search = forwardRef(
         onChange={onEventChanged}
         onBlur={onBlur}
         onFocus={onFocus}
+        onKeyDown={onKeyDown}
         autoComplete={autoComplete}
         size={size}
         wrapperRole="search"

packages/core/src/components/Search/Search.types.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { SubIcon, VibeComponentProps } from "../../types";
-import { InputSize } from "../BaseInput/BaseInput.types";
+import { InputSize } from "../BaseInput";
 import IconButton from "../IconButton/IconButton";
 import MenuButton from "../MenuButton/MenuButton";
 
@@ -93,4 +93,8 @@ export interface SearchProps extends VibeComponentProps {
    * Callback function that is called when the clear button is clicked.
    */
   onClear?: () => void;
+  /**
+   * Callback function that is called when a keyboard key is down.
+   */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }

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);
+    });
   });
 });

packages/core/src/components/Steps/__stories__/Steps.mdx

@@ -41,7 +41,6 @@ import { Steps } from "@vibe/core";
 
 <UsageGuidelines
   guidelines={[
-    "Stepper must have three or more steps.",
     "The stepper shows users where they are in the process, and can be used to navigate through the process by selecting steps.",
     "If a task needs more than six steps, consider simplifying the process or breaking it up into multiple tasks."
   ]}

packages/core/src/components/TextField/TextField.tsx

@@ -224,7 +224,7 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
     }, [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;
       }
 
@@ -233,7 +233,7 @@ const TextField: VibeComponent<TextFieldProps, unknown> & {
       }
       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;

packages/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vibe/icons",
-  "version": "1.0.0-rc.0",
+  "version": "0.1.1-alpha.0",
   "description": "Vibe's Icon Library",
   "repository": {
     "type": "git",

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
+    }
+  ]
+};