mondaycom · talkor · Aug 15, 2024 · Aug 11, 2024 · Aug 11, 2024 · Aug 11, 2024
diff --git a/packages/core/plop/general/component-stories-js.txt b/packages/core/plop/general/component-stories-js.txt
@@ -5,7 +5,6 @@ import styles from "./{{properCase componentName}}.stories.module.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: {{properCase componentName}},
-  enumPropNamesArray: [], // List enum props here
   iconPropNamesArray: [], // List props that are typed as icons here
   actionPropsArray: [] // List the component's actions here
 });

diff --git a/packages/core/src/components/Accordion/AccordionItem/__stories__/accordionItem.stories.tmp b/packages/core/src/components/Accordion/AccordionItem/__stories__/accordionItem.stories.tmp
diff --git a/packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.tsx b/packages/core/src/components/AlertBanner/AlertBannerLink/AlertBannerLink.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import cx from "classnames";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
 import React, { FC, useContext } from "react";

diff --git a/packages/core/src/components/AttentionBox/AttentionBox.tsx b/packages/core/src/components/AttentionBox/AttentionBox.tsx
@@ -18,7 +18,7 @@ import styles from "./AttentionBox.module.scss";
 
 export interface AttentionBoxProps extends VibeComponentProps {
   className?: string;
-  // Will remove when releasing version 2 as BREAKING CHANGES
+  // TODO: [breaking] remove prop
   withIconWithoutHeader?: boolean;
   /** we support 5 types of attention boxes */
   type?: AttentionBoxType;
@@ -28,6 +28,7 @@ export interface AttentionBoxProps extends VibeComponentProps {
   title?: string;
   text?: string;
   children?: ElementContent;
+  // TODO: [breaking] remove prop
   withoutIcon?: boolean;
   onClose?: (event: React.MouseEvent) => void;
   compact?: boolean;
@@ -39,15 +40,13 @@ const AttentionBox: React.FC<AttentionBoxProps> & {
   iconTypes?: typeof IconTypeEnum;
 } = ({
   className,
-  // TODO Remove in next major as breaking change
   withIconWithoutHeader = false,
   type = "primary",
   icon,
   iconType = "svg",
   title,
   text,
   children,
-  // TODO Remove in next major as breaking change
   withoutIcon = false,
   onClose,
   compact = false,

diff --git a/packages/core/src/components/Avatar/AvatarBadge.tsx b/packages/core/src/components/Avatar/AvatarBadge.tsx
@@ -17,8 +17,6 @@ export interface AvatarBadgeProps extends VibeComponentProps {
    * Use to provide SVG Components
    */
   icon?: SubIcon;
-  // TODO Remove in next major as breaking change
-  ariaLabel?: string;
   tabIndex?: string | number;
   className?: string;
   size?: AvatarSize;
@@ -29,8 +27,6 @@ export const AvatarBadge: React.FC<AvatarBadgeProps> & {
 } = ({
   src,
   icon,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ariaLabel,
   tabIndex = 0,
   className,
   size = "large",

diff --git a/packages/core/src/components/Avatar/__stories__/Avatar.stories.tsx b/packages/core/src/components/Avatar/__stories__/Avatar.stories.tsx
@@ -11,7 +11,6 @@ import "./Avatar.stories.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Avatar,
-  enumPropNamesArray: ["type", "size"],
   iconPropNamesArray: ["icon"]
 });
 

diff --git a/packages/core/src/components/Badge/__stories__/Badge.stories.tsx b/packages/core/src/components/Badge/__stories__/Badge.stories.tsx
@@ -11,9 +11,6 @@ import { createComponentTemplate, StoryDescription } from "vibe-storybook-compon
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Badge,
-  enumPropNamesArray: ["anchor", "alignment", "type"],
-  iconPropNamesArray: [],
-  actionPropsArray: [],
   ignoreControlsPropNamesArray: ["children"]
 });
 

diff --git a/packages/core/src/components/Box/__stories__/Box.stories.tsx b/packages/core/src/components/Box/__stories__/Box.stories.tsx
@@ -4,33 +4,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import styles from "./Box.stories.module.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: Box,
-  enumPropNamesArray: [
-    "className",
-    "id",
-    "children",
-    "disabled",
-    "border",
-    "borderColor",
-    "rounded",
-    "shadow",
-    "margin",
-    "marginX",
-    "marginY",
-    "marginTop",
-    "marginEnd",
-    "marginBottom",
-    "marginStart",
-    "padding",
-    "paddingX",
-    "paddingY",
-    "paddingTop",
-    "paddingEnd",
-    "paddingBottom",
-    "paddingStart",
-    "backgroundColor",
-    "textColor"
-  ]
+  component: Box
 });
 
 export default {

diff --git a/...core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.tsx b/...core/src/components/BreadcrumbsBar/BreadcrumbItem/BreadcrumbContent/BreadcrumbContent.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import React, { ForwardedRef, forwardRef, useCallback, useMemo } from "react";
 import { keyCodes } from "../../../../constants";
 import { SubIcon, VibeComponentProps } from "../../../../types";

diff --git a/packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.tsx b/packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.tsx
@@ -8,8 +8,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook/functions/c
 import "./BreadcrumbsBar.stories.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: BreadcrumbsBar,
-  enumPropNamesArray: ["type"]
+  component: BreadcrumbsBar
 });
 
 const breadcrumbsBarTemplate = (args: BreadcrumbBarProps) => {

diff --git a/packages/core/src/components/Button/__stories__/Button.stories.tsx b/packages/core/src/components/Button/__stories__/Button.stories.tsx
@@ -11,7 +11,6 @@ type Story = StoryObj<typeof Button>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Button,
-  enumPropNamesArray: ["kind", "size", "color", "type"],
   iconPropNamesArray: ["leftIcon", "rightIcon", "successIcon"],
   actionPropsArray: ["onClick"]
 });

diff --git a/packages/core/src/components/ButtonGroup/__stories__/ButtonGroup.stories.tsx b/packages/core/src/components/ButtonGroup/__stories__/ButtonGroup.stories.tsx
@@ -9,7 +9,6 @@ type Story = StoryObj<typeof ButtonGroup>;
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: ButtonGroup,
-  enumPropNamesArray: ["kind", "size"],
   actionPropsArray: ["onSelect"]
 });
 

diff --git a/packages/core/src/components/Chips/__stories__/Chips.stories.tsx b/packages/core/src/components/Chips/__stories__/Chips.stories.tsx
@@ -16,7 +16,6 @@ import styles from "./Chips.stories.module.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Chips,
-  enumPropNamesArray: ["color"],
   iconPropNamesArray: ["rightIcon", "leftIcon"],
   actionPropsArray: ["onDelete", "onMouseDown", "onClick"]
 });

diff --git a/packages/core/src/components/Clickable/Clickable.tsx b/packages/core/src/components/Clickable/Clickable.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
 import cx from "classnames";
 import React, { AriaRole, forwardRef } from "react";
 import { noop as NOOP } from "lodash-es";
@@ -26,10 +25,10 @@ export interface ClickableProps extends VibeComponentProps {
    * Is the element and its content should be hidden from screen readers and other assistive technologies
    */
   ariaHidden?: boolean;
-  // TODO remove string in Vibe 2.0
+  // TODO: [breaking] remove string type
   ariaHasPopup?: boolean | string;
   ariaExpanded?: boolean;
-  // TODO remove string in Vibe 2.0
+  // TODO: [breaking] remove string type
   tabIndex?: string | number;
   disabled?: boolean;
   style?: React.CSSProperties;

diff --git a/packages/core/src/components/ColorPicker/__stories__/ColorPicker.stories.tsx b/packages/core/src/components/ColorPicker/__stories__/ColorPicker.stories.tsx
@@ -7,7 +7,6 @@ import { createComponentTemplate } from "vibe-storybook-components";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: ColorPicker,
-  enumPropNamesArray: ["colorStyle", "colorSize", "colorShape"],
   iconPropNamesArray: ["ColorIndicatorIcon", "SelectedIndicatorIcon", "NoColorIcon"],
   actionPropsArray: [{ name: "onSave", linkedToPropValue: "value" }]
 });

diff --git a/packages/core/src/components/Combobox/Combobox.tsx b/packages/core/src/components/Combobox/Combobox.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { camelCase } from "lodash-es";
 import cx from "classnames";
 import React, { useRef, useState, forwardRef, useMemo, useCallback } from "react";

diff --git a/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx b/packages/core/src/components/Combobox/ComboboxHelpers/ComboboxHelpers.tsx
@@ -201,7 +201,6 @@ export function comboboxItemRenderer({
   item: IComboboxItem;
   style: CSSProperties;
   optionEvents: IComboboxOptionEvents;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   optionRenderData: any;
   isVirtualized: boolean;
   stickyCategories?: boolean;

diff --git a/packages/core/src/components/Combobox/ComboboxService.ts b/packages/core/src/components/Combobox/ComboboxService.ts
@@ -18,7 +18,6 @@ export const getOptionsByCategories = (
     if (result[categoryId]) {
       result[categoryId].push(option);
     } else {
-      // eslint-disable-next-line no-param-reassign
       result[categoryId] = [option];
     }
 
@@ -27,7 +26,6 @@ export const getOptionsByCategories = (
 
   // reorder the keys according to the categories order
   return Object.keys(categories).reduce((result: OptionsByCategories, categoryId) => {
-    // eslint-disable-next-line no-param-reassign
     if (optionsByCategories[categoryId]) result[categoryId] = optionsByCategories[categoryId];
 
     return result;

diff --git a/packages/core/src/components/Combobox/__stories__/Combobox.stories.tsx b/packages/core/src/components/Combobox/__stories__/Combobox.stories.tsx
@@ -18,7 +18,6 @@ import "./Combobox.stories.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Combobox,
-  enumPropNamesArray: ["size"],
   iconPropNamesArray: ["searchIcon"],
   actionPropsArray: ["onOptionHover", "onOptionLeave", "onFilterChanged"]
 });

diff --git a/packages/core/src/components/Combobox/__tests__/Combobox.interactions.js b/packages/core/src/components/Combobox/__tests__/Combobox.interactions.js
@@ -37,18 +37,6 @@ async function onSelectExistFilterClearsFilterTest(canvas) {
   expect(option1).toBeInTheDocument();
 }
 
-// there is no story which is not overview which activate this ability
-// eslint-disable-next-line no-unused-vars
-async function onSelectOptionClearsFilterTest(canvas) {
-  const { comboboxElement, searchElement } = await getComponentElements(canvas);
-  await typeText(searchElement, "Option");
-  const optionToClick = getByText(comboboxElement, "Option 1");
-  await clickElement(optionToClick);
-  expect(searchElement).toHaveValue("");
-  const option1 = getByText("Option 1");
-  expect(option1).toBeTruthy();
-}
-
 async function onNavigateBetweenOptionsByArrowsAriaUpdates(canvas) {
   const { comboboxElement, searchElement } = await getComponentElements(canvas);
 

diff --git a/packages/core/src/components/Counter/__stories__/Counter.stories.tsx b/packages/core/src/components/Counter/__stories__/Counter.stories.tsx
@@ -10,8 +10,7 @@ import Avatar from "../../Avatar/Avatar";
 import "./Counter.stories.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: Counter,
-  enumPropNamesArray: ["size", "color", "kind"]
+  component: Counter
 });
 
 const counterTemplate = createComponentTemplate(Counter);

diff --git a/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx b/packages/core/src/components/DatePicker/YearPicker/YearsList.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import Button from "../../Button/Button";
 import styles from "./YearPicker.module.scss";
 
-// eslint-disable-next-line @typescript-eslint/no-empty-function
 const NOOP = () => {};
 
 export interface YearsListProps {

diff --git a/packages/core/src/components/Dialog/Dialog.tsx b/packages/core/src/components/Dialog/Dialog.tsx
@@ -556,7 +556,6 @@ export default class Dialog extends PureComponent<DialogProps, DialogState> {
                 enabled: true,
                 phase: "write",
                 fn({ state }) {
-                  // eslint-disable-next-line no-param-reassign
                   if (!state.styles.arrow) {
                     return state;
                   }

diff --git a/packages/core/src/components/Dialog/DialogContent/DialogContent.tsx b/packages/core/src/components/Dialog/DialogContent/DialogContent.tsx
@@ -22,7 +22,7 @@ export interface DialogContentProps extends VibeComponentProps {
   position?: PopperJS.Placement;
   wrapperClassName?: string;
   isOpen?: boolean;
-  // TODO breaking change convert to enum
+  // TODO: [breaking] use type
   startingEdge?: any;
   animationType?: DialogAnimationType;
   onEsc?: (event: React.KeyboardEvent) => void;

diff --git a/packages/core/src/components/Dialog/__stories__/Dialog.stories.tsx b/packages/core/src/components/Dialog/__stories__/Dialog.stories.tsx
@@ -16,10 +16,7 @@ import { HideShowEvent } from "../DialogConstants";
 import { DialogProps } from "../Dialog";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: Dialog,
-  enumPropNamesArray: [], // List enum props here
-  iconPropNamesArray: [], // List props that are typed as icons here
-  actionPropsArray: [] // List the component's actions here
+  component: Dialog
 });
 
 const showHideArgTypes = {

diff --git a/...core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx b/...core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx
@@ -6,7 +6,6 @@ import DialogContentContainerExample from "./DialogContentContainerExample";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: DialogContentContainer,
-  enumPropNamesArray: ["type", "size"],
   ignoreControlsPropNamesArray: ["children"]
 });
 

diff --git a/packages/core/src/components/Divider/__stories__/Divider.stories.tsx b/packages/core/src/components/Divider/__stories__/Divider.stories.tsx
@@ -4,8 +4,7 @@ import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import styles from "./Divider.stories.module.scss";
 
 const metaSettings = createStoryMetaSettingsDecorator({
-  component: Divider,
-  enumPropNamesArray: ["direction"]
+  component: Divider
 });
 
 const dividerTemplate = (args: DividerProps) => (

diff --git a/packages/core/src/components/Dropdown/Dropdown.styles.js b/packages/core/src/components/Dropdown/Dropdown.styles.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-param-reassign */
 import { SIZES } from "../../constants/sizes";
 import { getCSSVar } from "../../services/themes";
 import { getScrollableParent } from "../../utils/dom-utils";

diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/require-default-props,react/forbid-prop-types */
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
 import cx from "classnames";
 import { BaseSizes, SIZES_VALUES } from "../../constants";

diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
@@ -14,7 +14,6 @@ import { fakeFetchUsers } from "./Dropdown.stories.helpers";
 
 const metaSettings = createStoryMetaSettingsDecorator({
   component: Dropdown,
-  enumPropNamesArray: ["size", "menuPosition", "menuPlacement"],
   actionPropsArray: [
     "onMenuOpen",
     "onMenuClose",

diff --git a/packages/core/src/components/Dropdown/__tests__/Dropdown.snapshot.test.js b/packages/core/src/components/Dropdown/__tests__/Dropdown.snapshot.test.js
@@ -136,7 +136,6 @@ describe("Dropdown renders correctly", () => {
   });
 
   it("with tabIndex", () => {
-    // eslint-disable-next-line jsx-a11y/tabindex-no-positive
     const tree = renderer.create(<Dropdown tabIndex={9999} />).toJSON();
     expect(tree).toMatchSnapshot();
   });

diff --git a/packages/core/src/components/Dropdown/__tests__/driver.js b/packages/core/src/components/Dropdown/__tests__/driver.js
@@ -17,7 +17,6 @@ export default class DropdownDriver {
   constructor() {
     this.props = { className: "dropdown-story" };
 
-    // eslint-disable-next-line no-constructor-return
     return this;
   }
 

diff --git a/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx b/packages/core/src/components/Dropdown/components/ClearIndicator/ClearIndicator.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import Icon from "../../../Icon/Icon";

diff --git a/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx b/packages/core/src/components/Dropdown/components/DropdownIndicator/DropdownIndicator.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import { components } from "react-select";
 import Icon from "../../../Icon/Icon";

diff --git a/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx b/packages/core/src/components/Dropdown/components/MultiValueContainer/MultiValueContainer.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/no-unstable-nested-components */
 import React, { useCallback, useEffect, useState } from "react";
 import { components } from "react-select";
 import cx from "classnames";
@@ -79,6 +78,7 @@ export default function Container({ children, selectProps, ...otherProps }) {
           />
         ) : null;
       }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [selectedOptions, chipClassName, isDisabled, readOnly, withMandatoryDefaultOptions, onDelete, size]
   );
 

diff --git a/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx b/packages/core/src/components/Dropdown/components/singleValue/singleValue.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable react/jsx-props-no-spreading */
 import React from "react";
 import cx from "classnames";
 import { components } from "react-select";