[WEB-4661] fix: move helpers file into utils #7568

packages/ui/src/auth-form/auth-forgot-password.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export interface AuthForgotPasswordProps {
   onForgotPassword?: () => void;

packages/ui/src/auth-form/auth-form.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from "react";
 import { E_PASSWORD_STRENGTH } from "@plane/constants";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { Button } from "../button/button";
 import { Spinner } from "../spinners/circular-spinner";
 import { AuthConfirmPasswordInput } from "./auth-confirm-password-input";

packages/ui/src/auth-form/auth-input.tsx

@@ -1,6 +1,6 @@
 import { Eye, EyeOff } from "lucide-react";
 import React, { useState } from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { Input } from "../form-fields/input";
 
 export interface AuthInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "autoComplete"> {

packages/ui/src/avatar/avatar-group.tsx

@@ -2,7 +2,7 @@ import React from "react";
 // ui
 import { Tooltip } from "../tooltip";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // types
 import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
 

packages/ui/src/avatar/avatar.tsx

@@ -2,7 +2,7 @@ import React from "react";
 // ui
 import { Tooltip } from "../tooltip";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export type TAvatarSize = "sm" | "md" | "base" | "lg" | number;
 

packages/ui/src/badge/badge.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 // helpers
 import { getIconStyling, getBadgeStyling, TBadgeVariant, TBadgeSizes } from "./helper";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export interface BadgeProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TBadgeVariant;

packages/ui/src/breadcrumbs/breadcrumbs.tsx

@@ -1,6 +1,6 @@
 import { ChevronRight } from "lucide-react";
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { Tooltip } from "../tooltip";
 
 type BreadcrumbsProps = {

packages/ui/src/breadcrumbs/navigation-dropdown.tsx

@@ -2,7 +2,7 @@
 
 import { CheckIcon } from "lucide-react";
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // ui
 import { CustomMenu, TContextMenuItem } from "../dropdowns";
 import { Tooltip } from "../tooltip";

packages/ui/src/breadcrumbs/navigation-search-dropdown.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState } from "react";
 import { ICustomSearchSelectOption } from "@plane/types";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { CustomSearchSelect } from "../dropdowns";
 import { Tooltip } from "../tooltip";
 import { Breadcrumbs } from "./breadcrumbs";

packages/ui/src/button/button.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { getIconStyling, getButtonStyling, TButtonVariant, TButtonSizes } from "./helper";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   variant?: TButtonVariant;

packages/ui/src/button/toggle-switch.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Switch } from "@headlessui/react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 interface IToggleSwitchProps {
   value: boolean;

packages/ui/src/calendar.tsx

@@ -4,7 +4,7 @@ import { ChevronLeft } from "lucide-react";
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
 
-import { cn } from "../helpers";
+import { cn } from "./utils";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

packages/ui/src/card/card.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import {
   ECardDirection,
   ECardSpacing,

packages/ui/src/collapsible/collapsible-button.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { DropdownIcon, ISvgIcons } from "../icons";
 
 type Props = {

packages/ui/src/content-wrapper/content-wrapper.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { Row } from "../row";
 import { ERowVariant, TRowVariant } from "../row/helper";
 

packages/ui/src/drag-handle.tsx

@@ -1,7 +1,7 @@
-import React, { forwardRef } from "react";
 import { MoreVertical } from "lucide-react";
+import React, { forwardRef } from "react";
 // helpers
-import { cn } from "../helpers";
+import { cn } from "./utils";
 
 interface IDragHandle {
   className?: string;

packages/ui/src/drop-indicator.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../helpers";
+import { cn } from "./utils";
 
 type Props = {
   isVisible: boolean;

packages/ui/src/dropdown/common/button.tsx

@@ -1,8 +1,7 @@
-import React, { Fragment } from "react";
-// headless ui
 import { Combobox } from "@headlessui/react";
+import React, { Fragment } from "react";
 // helper
-import { cn } from "../../../helpers";
+import { cn } from "../../utils";
 import { IMultiSelectDropdownButton, ISingleSelectDropdownButton } from "../dropdown";
 
 export const DropdownButton: React.FC<IMultiSelectDropdownButton | ISingleSelectDropdownButton> = (props) => {

packages/ui/src/dropdown/common/input-search.tsx

@@ -1,10 +1,8 @@
-import React, { FC, useEffect, useRef } from "react";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// icons
 import { Search } from "lucide-react";
+import React, { FC, useEffect, useRef } from "react";
 // helpers
-import { cn } from "../../../helpers";
+import { cn } from "../../utils";
 
 interface IInputSearch {
   isOpen: boolean;
@@ -32,9 +30,11 @@ export const InputSearch: FC<IInputSearch> = (props) => {
 
   useEffect(() => {
     if (isOpen && !isMobile) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
       inputRef.current && inputRef.current.focus();
     }
   }, [isOpen, isMobile]);
+
   return (
     <div
       className={cn(

packages/ui/src/dropdown/common/options.tsx

@@ -1,14 +1,12 @@
-import React from "react";
-// headless ui
 import { Combobox } from "@headlessui/react";
-// icons
 import { Check } from "lucide-react";
-// components
-import { DropdownOptionsLoader, InputSearch } from ".";
+import React from "react";
 // helpers
-import { cn } from "../../../helpers";
+import { cn } from "../../utils";
 // types
 import { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "../dropdown";
+// components
+import { DropdownOptionsLoader, InputSearch } from ".";
 
 export const DropdownOptions: React.FC<IMultiSelectDropdownOptions | ISingleSelectDropdownOptions> = (props) => {
   const {

packages/ui/src/dropdown/multi-select.tsx

@@ -5,7 +5,7 @@ import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 // local imports
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";

packages/ui/src/dropdown/single-select.tsx

@@ -5,7 +5,7 @@ import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 // local imports
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";

packages/ui/src/dropdowns/context-menu/item.tsx

@@ -2,7 +2,7 @@ import { ChevronRight } from "lucide-react";
 import React, { useState, useRef, useContext } from "react";
 import { usePopper } from "react-popper";
 // helpers
-import { cn } from "../../../helpers";
+import { cn } from "../../utils";
 // types
 import { TContextMenuItem, ContextMenuContext, Portal } from "./root";
 

packages/ui/src/dropdowns/context-menu/root.tsx

@@ -1,11 +1,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
-// plane helpers
-import { useOutsideClickDetector } from "@plane/hooks";
-// helpers
-import { cn } from "../../../helpers";
 // hooks
 import { usePlatformOS } from "../../hooks/use-platform-os";
+// helpers
+import { cn } from "../../utils";
 // components
 import { ContextMenuItem } from "./item";
 

packages/ui/src/dropdowns/custom-menu.tsx

@@ -6,7 +6,7 @@ import { usePopper } from "react-popper";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // types

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -6,7 +6,7 @@ import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
 // local imports
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { Tooltip } from "../tooltip";
 import { ICustomSearchSelectProps } from "./helper";

packages/ui/src/dropdowns/custom-select.tsx

@@ -7,7 +7,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // types
 import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
 

packages/ui/src/emoji/emoji-icon-picker-new.tsx

@@ -5,7 +5,7 @@ import EmojiPicker from "emoji-picker-react";
 // plane helpers
 import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // hooks
 import { LucideIconsList } from "./lucide-icons-list";
 // helpers

packages/ui/src/emoji/emoji-icon-picker.tsx

@@ -7,7 +7,7 @@ import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { IconsList } from "./icons-list";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // hooks
 import { EmojiIconPickerTypes, TABS_LIST, TCustomEmojiPicker } from "./emoji-icon-helper";
 

packages/ui/src/emoji/icons-list.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react";
 // icons
 import useFontFaceObserver from "use-font-face-observer";
 import { MATERIAL_ICONS_LIST } from "..";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { Input } from "../form-fields";
 import { InfoIcon } from "../icons";
 // components

packages/ui/src/emoji/lucide-icons-list.tsx

@@ -2,7 +2,7 @@ import { Search } from "lucide-react";
 import React, { useEffect, useState } from "react";
 // local imports
 import { LUCIDE_ICONS_LIST } from "..";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { Input } from "../form-fields";
 import { InfoIcon } from "../icons";
 import { DEFAULT_COLORS, TIconsListProps, adjustColorForContrast } from "./emoji-icon-helper";

packages/ui/src/favorite-star.tsx

@@ -1,7 +1,7 @@
-import React from "react";
 import { Star } from "lucide-react";
+import React from "react";
 // helpers
-import { cn } from "../helpers";
+import { cn } from "./utils";
 
 type Props = {
   buttonClassName?: string;

packages/ui/src/form-fields/checkbox.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
   containerClassName?: string;

packages/ui/src/form-fields/input-color-picker.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import { ColorResult, SketchPicker } from "react-color";
 import { usePopper } from "react-popper";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // components
 import { Button } from "../button";
 import { Input } from "./input";

packages/ui/src/form-fields/input.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   mode?: "primary" | "transparent" | "true-transparent";

packages/ui/src/form-fields/textarea.tsx

@@ -1,6 +1,6 @@
 import React, { useRef } from "react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // hooks
 import { useAutoResizeTextArea } from "../hooks/use-auto-resize-textarea";
 

packages/ui/src/header/header.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
 import { ERowVariant, Row } from "../row";
 

packages/ui/src/icons/priority-icon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { AlertCircle, Ban, SignalHigh, SignalLow, SignalMedium } from "lucide-react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export type TIssuePriorities = "urgent" | "high" | "medium" | "low" | "none";
 

packages/ui/src/loader.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // helpers
-import { cn } from "../helpers";
+import { cn } from "./utils";
 
 type Props = {
   children: React.ReactNode;

packages/ui/src/modals/alert-modal.tsx

@@ -6,7 +6,7 @@ import { ModalCore } from "./modal-core";
 // constants
 import { EModalPosition, EModalWidth } from "./constants";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export type TModalVariant = "danger" | "primary";
 

packages/ui/src/modals/modal-core.tsx

@@ -3,7 +3,7 @@ import { Dialog, Transition } from "@headlessui/react";
 // constants
 import { EModalPosition, EModalWidth } from "./constants";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 type Props = {
   children: React.ReactNode;

packages/ui/src/oauth/oauth-button.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export interface OAuthButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   text: string;

packages/ui/src/oauth/oauth-options.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { OAuthButton } from "./oauth-button";
 
 export type TOAuthOption = {

packages/ui/src/popovers/popover-menu.tsx

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 // components
 import { Popover } from "./popover";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // types
 import { TPopoverMenu } from "./types";
 

packages/ui/src/popovers/popover.tsx

@@ -2,7 +2,7 @@ import React, { Fragment, Ref, useState } from "react";
 import { usePopper } from "react-popper";
 import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // types
 import { TPopover } from "./types";
 import { EllipsisVertical } from "lucide-react";

packages/ui/src/progress/linear-progress-indicator.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Tooltip } from "../tooltip";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 type Props = {
   data: any;

packages/ui/src/row/row.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { ERowVariant, rowStyle, TRowVariant } from "./helper";
 
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {

packages/ui/src/scroll-area.tsx

@@ -1,7 +1,7 @@
 "use client";
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
 import React, { FC } from "react";
-import { cn } from "../helpers";
+import { cn } from "./utils";
 
 type TScrollAreaProps = {
   type?: "auto" | "always" | "scroll" | "hover";

packages/ui/src/sortable/draggable.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { isEqual } from "lodash";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { attachClosestEdge, extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { DropIndicator } from "../drop-indicator";
 

packages/ui/src/spinners/circular-spinner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export interface ISpinner extends React.SVGAttributes<SVGElement> {
   height?: string;

packages/ui/src/tables/table.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // types
 import { TTableData } from "./types";
 

packages/ui/src/tabs/tab-list.tsx

@@ -2,7 +2,7 @@ import { Tab } from "@headlessui/react";
 import { LucideProps } from "lucide-react";
 import React, { FC } from "react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export type TabListItem = {
   key: string;

packages/ui/src/tabs/tabs.tsx

@@ -2,7 +2,7 @@ import { Tab } from "@headlessui/react";
 import React, { FC, Fragment, useEffect, useState } from "react";
 // helpers
 import { useLocalStorage } from "@plane/hooks";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 // types
 import { TabList, TabListItem } from "./tab-list";
 

packages/ui/src/tag/tag.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 import { ETagSize, ETagVariant, getTagStyle, TTagSize, TTagVariant } from "./helper";
 
 export interface TagProps extends React.ComponentProps<"div"> {

packages/ui/src/toast/index.tsx

@@ -5,7 +5,7 @@ import { AlertTriangle, CheckCircle2, X, XCircle } from "lucide-react";
 // spinner
 import { CircularBarSpinner } from "../spinners";
 // helper
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export enum TOAST_TYPE {
   SUCCESS = "success",

packages/ui/src/tooltip/tooltip.tsx

@@ -1,7 +1,7 @@
 import { Tooltip2 } from "@blueprintjs/popover2";
 import React, { useEffect, useRef, useState } from "react";
 // helpers
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 export type TPosition =
   | "top"

packages/ui/src/typography/sub-heading.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { cn } from "../../helpers";
+import { cn } from "../utils";
 
 type Props = {
   children: React.ReactNode;

packages/ui/src/utils/index.ts

@@ -1 +1,2 @@
+export * from "./classname";
 export * from "./icons";