Merge branch 'vibe3' into vibe3-next-components

mondaycom · May 29, 2024 · 0fb0e30 · 0fb0e30
2 parents c383fea + 6451097
commit 0fb0e30
Show file tree

Hide file tree

Showing 214 changed files with 214 additions and 90 deletions.
diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js
@@ -110,19 +110,6 @@ module.exports = {
         "react-hooks/rules-of-hooks": "off",
         "react/jsx-key": "off"
       }
-    },
-    // TODO This entire block should be removed and fixed, unless we move to React 17+
-    {
-      files: [
-        "**/__stories__/**/*.{js,jsx,ts,tsx}",
-        "src/storybook/stand-alone-documentaion/**/*.{js,jsx,ts,tsx}",
-        "src/storybook/patterns/**/*.{js,jsx,ts,tsx}",
-        "src/storybook/components/**/*.{js,jsx,ts,tsx}",
-        "src/storybook/decorators/**/*.{js,jsx,ts,tsx}"
-      ],
-      rules: {
-        "react/react-in-jsx-scope": "off"
-      }
     }
   ],
   env: {

diff --git a/packages/core/src/components/Accordion/Accordion/__stories__/Accordion.stories.js b/packages/core/src/components/Accordion/Accordion/__stories__/Accordion.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import Accordion from "../Accordion";
 import AccordionItem from "../../AccordionItem/AccordionItem";
 import Checkbox from "../../../Checkbox/Checkbox";

diff --git a/packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.helpers.tsx b/packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipWhenToUse = () => (

diff --git a/packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.js b/packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import AlertBanner from "../AlertBanner";
 import AlertBannerText from "../AlertBannerText/AlertBannerText";
 import AlertBannerLink from "../AlertBannerLink/AlertBannerLink";

diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.helpers.tsx b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipCheckYourself = () => (

diff --git a/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.js b/packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { useCallback } from "react";
 import AttentionBox from "../AttentionBox";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/Avatar/__stories__/Avatar.stories.helpers.tsx b/packages/core/src/components/Avatar/__stories__/Avatar.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipMultipleAvatarsTogether = () => (

diff --git a/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.js b/packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { useCallback, useState } from "react";
 import { StoryDescription } from "vibe-storybook-components";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/Badge/__stories__/Badge.stories.tsx b/packages/core/src/components/Badge/__stories__/Badge.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Badge from "../Badge";
 import person from "./assets/person.png";
 import { ExternalPage, WhatsNew } from "../../Icon/Icons";

diff --git a/packages/core/src/components/Box/__stories__/Box.stories.helpers.tsx b/packages/core/src/components/Box/__stories__/Box.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Tip } from "vibe-storybook-components";
 
 export const TipBenefits = () => (

diff --git a/packages/core/src/components/Box/__stories__/Box.stories.tsx b/packages/core/src/components/Box/__stories__/Box.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Box, { BoxProps } from "../Box";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import styles from "./Box.stories.module.scss";

diff --git a/.../core/src/components/BreadcrumbsBar/BreadcrumbItem/__stories__/BreadcrumbItem.stories.tsx b/.../core/src/components/BreadcrumbsBar/BreadcrumbItem/__stories__/BreadcrumbItem.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { createStoryMetaSettingsDecorator } from "../../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";
 import BreadcrumbsBar from "../../BreadcrumbsBar";

diff --git a/packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.helpers.tsx b/packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipCheckYourself = () => (

diff --git a/packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.js b/packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import BreadcrumbsBar from "../BreadcrumbsBar";
 import BreadcrumbItem from "../BreadcrumbItem/BreadcrumbItem.tsx";
 import Avatar from "../../Avatar/Avatar";

diff --git a/packages/core/src/components/Button/__stories__/Button.stories.helpers.tsx b/packages/core/src/components/Button/__stories__/Button.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipIconButton = () => (

diff --git a/packages/core/src/components/ButtonGroup/__stories__/ButtonGroup.stories.helpers.tsx b/packages/core/src/components/ButtonGroup/__stories__/ButtonGroup.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipCheckYourself = () => (

diff --git a/packages/core/src/components/Checkbox/__stories__/Checkbox.stories.helpers.tsx b/packages/core/src/components/Checkbox/__stories__/Checkbox.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipAmIUsingTheRightComponent = () => (

diff --git a/packages/core/src/components/Chips/__stories__/Chips.stories.helpers.tsx b/packages/core/src/components/Chips/__stories__/Chips.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipLabel = () => (

diff --git a/packages/core/src/components/Chips/__stories__/Chips.stories.js b/packages/core/src/components/Chips/__stories__/Chips.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { chunk as _chunk } from "lodash-es";
 import Flex from "../../Flex/Flex";
 import Chips from "../Chips";

diff --git a/packages/core/src/components/Clickable/__stories__/Clickable.stories.helpers.tsx b/packages/core/src/components/Clickable/__stories__/Clickable.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipHookSolution = () => (

diff --git a/packages/core/src/components/Clickable/__stories__/Clickable.stories.js b/packages/core/src/components/Clickable/__stories__/Clickable.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import Clickable from "../Clickable";
 import Flex from "../../Flex/Flex";
 import { statesPlaySuite } from "../__tests__/Clickable.interactions";

diff --git a/packages/core/src/components/Combobox/__stories__/Combobox.stories.helpers.tsx b/packages/core/src/components/Combobox/__stories__/Combobox.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipOtherComponents = () => (

diff --git a/packages/core/src/components/Combobox/__stories__/Combobox.stories.js b/packages/core/src/components/Combobox/__stories__/Combobox.stories.js
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import React, { useMemo, useState } from "react";
 import { StoryDescription } from "vibe-storybook-components";
 import Combobox from "../Combobox";
 import person1 from "./assets/person1.png";

diff --git a/packages/core/src/components/Combobox/__stories__/OptionRenderer.jsx b/packages/core/src/components/Combobox/__stories__/OptionRenderer.jsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Avatar from "../../Avatar/Avatar";
 
 export const optionRenderer = ({ src, id, label, position }) => {

diff --git a/packages/core/src/components/Counter/__stories__/Counter.stories.helpers.tsx b/packages/core/src/components/Counter/__stories__/Counter.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip, UsageGuidelines } from "vibe-storybook-components";
 
 export const TipCheckYourself = () => (

diff --git a/packages/core/src/components/DatePicker/__stories__/DatePicker.stories.js b/packages/core/src/components/DatePicker/__stories__/DatePicker.stories.js
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React, { useState } from "react";
 import moment from "moment";
 import DatePicker from "../DatePicker";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/Dialog/__stories__/Dialog.stories.helpers.tsx b/packages/core/src/components/Dialog/__stories__/Dialog.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Link, StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipDialogContentContainer = () => (

diff --git a/packages/core/src/components/Dialog/__stories__/Dialog.stories.js b/packages/core/src/components/Dialog/__stories__/Dialog.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { Button, Dialog, DialogContentContainer, Flex, IconButton } from "../../../components";
 import { ExampleContent } from "./helpers";

diff --git a/...core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx b/...core/src/components/DialogContentContainer/__stories__/DialogContentContainer.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import DialogContentContainer from "../DialogContentContainer";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";

diff --git a/packages/core/src/components/Divider/__stories__/Divider.stories.tsx b/packages/core/src/components/Divider/__stories__/Divider.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Divider, { DividerProps } from "../Divider";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import styles from "./Divider.stories.module.scss";

diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipDevTipPopover = () => (

diff --git a/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js b/packages/core/src/components/Dropdown/__stories__/Dropdown.stories.js
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useRef, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { StoryDescription } from "vibe-storybook-components";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { multiInteractionTests, overviewPlaySuite } from "../__tests__/Dropdown.interactions";

diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.helpers.tsx b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipEditableText = () => (

diff --git a/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js b/packages/core/src/components/EditableHeading/__stories__/EditableHeading.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import EditableHeading from "../EditableHeading";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { createComponentTemplate } from "vibe-storybook-components";

diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.helpers.tsx b/packages/core/src/components/EditableText/__stories__/EditableText.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipTextField = () => (

diff --git a/packages/core/src/components/EditableText/__stories__/EditableText.stories.js b/packages/core/src/components/EditableText/__stories__/EditableText.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { createComponentTemplate } from "vibe-storybook-components";
 import EditableText from "../EditableText";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.helpers.tsx b/packages/core/src/components/ExpandCollapse/__stories__/ExpandCollapse.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipCombineMultiple = () => (

diff --git a/packages/core/src/components/Flex/__stories__/Flex.stories.tsx b/packages/core/src/components/Flex/__stories__/Flex.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Flex, { FlexProps } from "../Flex";
 import { Add, Filter, Person, Search, Sort } from "../../Icon/Icons";
 import Button from "../../Button/Button";

diff --git a/...KeyboardNavigationContext/__stories__/useGridKeyboardNavigationContext.stories.helpers.js b/...KeyboardNavigationContext/__stories__/useGridKeyboardNavigationContext.stories.helpers.js
@@ -1,5 +1,5 @@
 import { range } from "lodash-es";
-import { forwardRef, useMemo, useCallback, useRef } from "react";
+import React, { forwardRef, useMemo, useCallback, useRef } from "react";
 import cx from "classnames";
 import { action } from "@storybook/addon-actions";
 import { Button, Flex } from "../..";
@@ -19,8 +19,8 @@ export const DummyNavigableGrid = forwardRef(
     const getItemByIndex = useCallback(index => items[index], [items]);
     const { activeIndex, onSelectionAction } = useGridKeyboardNavigation({
       ref,
-      numberOfItemsInLine,
       itemsCount,
+      numberOfItemsInLine,
       getItemByIndex,
       onItemClicked: ON_CLICK,
       disabledIndexes

diff --git a/...nts/GridKeyboardNavigationContext/__stories__/useGridKeyboardNavigationContext.stories.js b/...nts/GridKeyboardNavigationContext/__stories__/useGridKeyboardNavigationContext.stories.js
@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import React, { useRef } from "react";
 import { GridKeyboardNavigationContext, useGridKeyboardNavigationContext } from "../GridKeyboardNavigationContext";
 import { createStoryMetaSettingsDecorator } from "../../../storybook/functions/createStoryMetaSettingsDecorator";
 import {

diff --git a/packages/core/src/components/Heading/__stories__/Heading.stories.helpers.tsx b/packages/core/src/components/Heading/__stories__/Heading.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipEditableHeading = () => (

diff --git a/packages/core/src/components/Heading/__stories__/Heading.stories.js b/packages/core/src/components/Heading/__stories__/Heading.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import Flex from "../../Flex/Flex";
 import { createComponentTemplate } from "vibe-storybook-components";

diff --git a/packages/core/src/components/Icon/__stories__/Icon.stories.tsx b/packages/core/src/components/Icon/__stories__/Icon.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Icon from "../Icon";
 import Bolt from "../Icons/components/Bolt";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/IconButton/__stories__/IconButton.stories.helpers.tsx b/packages/core/src/components/IconButton/__stories__/IconButton.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipCheckYourself = () => (

diff --git a/packages/core/src/components/Label/__stories__/Label.stories.helpers.tsx b/packages/core/src/components/Label/__stories__/Label.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipCheckYourself = () => (

diff --git a/packages/core/src/components/Label/__stories__/Label.stories.tsx b/packages/core/src/components/Label/__stories__/Label.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Label from "../Label";
 import Button from "../../Button/Button";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/Link/__stories__/Link.stories.helpers.tsx b/packages/core/src/components/Link/__stories__/Link.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipButton = () => (

diff --git a/packages/core/src/components/Link/__stories__/Link.stories.tsx b/packages/core/src/components/Link/__stories__/Link.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Link from "../Link";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import { ExternalPage, Info, Link as IconLink } from "../../Icon/Icons";

diff --git a/packages/core/src/components/List/__stories__/List.stories.helpers.tsx b/packages/core/src/components/List/__stories__/List.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipCheckYourself = () => (

diff --git a/packages/core/src/components/List/__stories__/List.stories.tsx b/packages/core/src/components/List/__stories__/List.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import List, { ListProps } from "../List";
 import Board from "../../Icon/Icons/components/Board";
 import Team from "../../Icon/Icons/components/Team";

diff --git a/packages/core/src/components/ListItem/__stories__/ListItem.stories.tsx b/packages/core/src/components/ListItem/__stories__/ListItem.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { createComponentTemplate } from "vibe-storybook-components";
 import ListItem from "../../ListItem/ListItem";
 import ListItemIcon from "../../ListItemIcon/ListItemIcon";

diff --git a/packages/core/src/components/Loader/__stories__/Loader.stories.helpers.tsx b/packages/core/src/components/Loader/__stories__/Loader.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipSkeleton = () => (

diff --git a/packages/core/src/components/Loader/__stories__/Loader.stories.tsx b/packages/core/src/components/Loader/__stories__/Loader.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { createComponentTemplate, StoryDescription } from "vibe-storybook-components";
 import Loader from "../Loader";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/Menu/Menu/hooks/useMouseLeave.tsx b/packages/core/src/components/Menu/Menu/hooks/useMouseLeave.tsx
@@ -1,4 +1,4 @@
-import { useLayoutEffect } from "react";
+import React, { useLayoutEffect } from "react";
 import useIsMouseEnter from "../../../../hooks/useIsMouseEnter";
 import usePrevious from "../../../../hooks/usePrevious";
 

diff --git a/packages/core/src/components/Menu/MenuDivider/__stories__/MenuDivider.stories.tsx b/packages/core/src/components/Menu/MenuDivider/__stories__/MenuDivider.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import MenuDivider from "../MenuDivider";
 import { createComponentTemplate } from "vibe-storybook-components";
 import Menu from "../../Menu/Menu";

diff --git a/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.helpers.tsx b/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Tip } from "vibe-storybook-components";
 
 // TODO add links to the components mentioned in the tip

diff --git a/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.js b/packages/core/src/components/Menu/MenuGridItem/__stories__/MenuGridItem.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { createStoryMetaSettingsDecorator } from "../../../../storybook";
 import { DialogContentContainer, Menu, MenuItem, MenuTitle } from "../../..";
 import { DummyNavigableGrid } from "../../../GridKeyboardNavigationContext/__stories__/useGridKeyboardNavigationContext.stories.helpers";

diff --git a/...es/core/src/components/Menu/MenuItemButton/__stories__/MenuItemButton.stories.helpers.tsx b/...es/core/src/components/Menu/MenuItemButton/__stories__/MenuItemButton.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { Tip } from "vibe-storybook-components";
 
 // TODO add links to the components mentioned in the tip

diff --git a/packages/core/src/components/Modal/__stories__/Modal.stories.js b/packages/core/src/components/Modal/__stories__/Modal.stories.js
@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from "react";
+import React, { useCallback, useRef, useState } from "react";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import ModalContent from "../ModalContent/ModalContent";
 import ModalFooter from "../ModalFooter/ModalFooter";

diff --git a/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.tsx b/packages/core/src/components/MultiStepIndicator/__stories__/MultiStepIndicator.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import MultiStepIndicator from "../MultiStepIndicator";
 import { StepStatus } from "../MultiStepConstants";

diff --git a/...mponents/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.helpers.tsx b/...mponents/ProgressBars/LinearProgressBar/__stories__/LinearProgressBar.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 import DialogContentContainer from "../../../DialogContentContainer/DialogContentContainer";
 import LinearProgressBar from "../LinearProgressBar";

diff --git a/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.helpers.tsx b/packages/core/src/components/RadioButton/__stories__/RadioButton.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipDropdown = () => (

diff --git a/packages/core/src/components/ResponsiveList/__stories__/ResponsiveList.stories.js b/packages/core/src/components/ResponsiveList/__stories__/ResponsiveList.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { ResizableBox } from "react-resizable";
 import { Activity, Alert, API, Bolt, Broom, Group, Moon, Sun, Open } from "../../Icon/Icons";
 import ResponsiveList from "../ResponsiveList";

diff --git a/packages/core/src/components/Search/__stories__/Search.stories.tsx b/packages/core/src/components/Search/__stories__/Search.stories.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { createComponentTemplate } from "vibe-storybook-components";
 import Search from "../Search";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";

diff --git a/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.helpers.tsx b/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipLoader = () => (

diff --git a/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.js b/packages/core/src/components/Skeleton/__stories__/Skeleton.stories.js
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import Skeleton from "../Skeleton";
 import Avatar from "../../Avatar/Avatar";
 import person from "./assets/person.png";

diff --git a/packages/core/src/components/Slider/__stories__/Slider.stories.helpers.tsx b/packages/core/src/components/Slider/__stories__/Slider.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import { StorybookLink, Tip } from "vibe-storybook-components";
 
 export const TipMultiStepIndicator = () => (

diff --git a/packages/core/src/components/Slider/__stories__/Slider.stories.js b/packages/core/src/components/Slider/__stories__/Slider.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 import { createComponentTemplate, VerticalStories } from "vibe-storybook-components";
 import { createStoryMetaSettingsDecorator } from "../../../storybook";
 import Slider from "../Slider";

diff --git a/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.js b/packages/core/src/components/SplitButton/__stories__/SplitButton.stories.js
@@ -1,3 +1,4 @@
+import React from "react";
 /* eslint-disable react/no-children-prop */
 import { createComponentTemplate } from "vibe-storybook-components";
 import SplitButton from "../SplitButton";

diff --git a/packages/core/src/components/Steps/__stories__/Steps.stories.helpers.js b/packages/core/src/components/Steps/__stories__/Steps.stories.helpers.js
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import Steps from "../Steps";
 
 // eslint-disable-next-line react/jsx-key

diff --git a/packages/core/src/components/Steps/__stories__/Steps.stories.js b/packages/core/src/components/Steps/__stories__/Steps.stories.js
@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react";
+import React, { useCallback, useState } from "react";
 import Steps from "../Steps";
 import Button from "../../Button/Button";
 import Tipseen from "../../Tipseen/Tipseen";

diff --git a/packages/core/src/components/Table/Table/__stories__/Table.stories.helpers.tsx b/packages/core/src/components/Table/Table/__stories__/Table.stories.helpers.tsx
@@ -1,3 +1,4 @@
+import React from "react";
 import Avatar from "../../../Avatar/Avatar";
 import { Calendar, Doc, Status } from "../../../Icon/Icons";
 import { LabelColor } from "../../../Label/LabelConstants";