[WEB-5416] fix: Use proper import syntax (#8105)

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

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import type { E_PASSWORD_STRENGTH } from "@plane/constants";
 import { cn, getPasswordStrength } from "@plane/utils";
 import { PasswordStrengthIndicator } from "../form-fields/password/indicator";
 import { AuthInput } from "./auth-input";

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

@@ -4,7 +4,8 @@ import { Tooltip } from "@plane/propel/tooltip";
 // helpers
 import { cn } from "../utils";
 // types
-import { TAvatarSize, getSizeInfo, isAValidNumber } from "./avatar";
+import type { TAvatarSize } from "./avatar";
+import { getSizeInfo, isAValidNumber } from "./avatar";
 
 type Props = {
   /**

packages/ui/src/badge/badge.tsx

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

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

@@ -4,7 +4,8 @@ import { CheckIcon } from "lucide-react";
 import * as React from "react";
 // ui
 import { Tooltip } from "@plane/propel/tooltip";
-import { CustomMenu, TContextMenuItem } from "../dropdowns";
+import type { TContextMenuItem } from "../dropdowns";
+import { CustomMenu } from "../dropdowns";
 import { cn } from "../utils";
 import { Breadcrumbs } from "./breadcrumbs";
 

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

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

packages/ui/src/button/button.tsx

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

packages/ui/src/card/card.tsx

@@ -1,14 +1,7 @@
 import * as React from "react";
 import { cn } from "../utils";
-import {
-  ECardDirection,
-  ECardSpacing,
-  ECardVariant,
-  getCardStyle,
-  TCardDirection,
-  TCardSpacing,
-  TCardVariant,
-} from "./helper";
+import type { TCardDirection, TCardSpacing, TCardVariant } from "./helper";
+import { ECardDirection, ECardSpacing, ECardVariant, getCardStyle } from "./helper";
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: TCardVariant;

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

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

packages/ui/src/collapsible/collapsible.tsx

@@ -1,5 +1,6 @@
 import { Disclosure, Transition } from "@headlessui/react";
-import React, { FC, useState, useEffect, useCallback } from "react";
+import type { FC } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 
 export type TCollapsibleProps = {
   title: string | React.ReactNode;

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

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Row } from "../row";
-import { ERowVariant, TRowVariant } from "../row/helper";
+import type { TRowVariant } from "../row/helper";
+import { ERowVariant } from "../row/helper";
 import { cn } from "../utils";
 
 export interface ContentWrapperProps extends React.HTMLAttributes<HTMLDivElement> {

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

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

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

@@ -1,6 +1,7 @@
 import { Combobox } from "@headlessui/react";
 import { Search } from "lucide-react";
-import React, { FC, useEffect, useRef } from "react";
+import type { FC } from "react";
+import React, { useEffect, useRef } from "react";
 // helpers
 import { cn } from "../../utils";
 

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

@@ -4,7 +4,7 @@ import React from "react";
 // helpers
 import { cn } from "../../utils";
 // types
-import { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "../dropdown";
+import type { IMultiSelectDropdownOptions, ISingleSelectDropdownOptions } from "../dropdown";
 // components
 import { DropdownOptionsLoader, InputSearch } from ".";
 

packages/ui/src/dropdown/dropdown.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from "@popperjs/core";
+import type { Placement } from "@popperjs/core";
 
 export interface IDropdown {
   // root props

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

@@ -1,6 +1,7 @@
 import { Combobox } from "@headlessui/react";
 import { sortBy } from "lodash-es";
-import React, { FC, useMemo, useRef, useState } from "react";
+import type { FC } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -9,7 +10,7 @@ import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
 import { cn } from "../utils";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
-import { IMultiSelectDropdown } from "./dropdown";
+import type { IMultiSelectDropdown } from "./dropdown";
 
 export const MultiSelectDropdown: FC<IMultiSelectDropdown> = (props) => {
   const {

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

@@ -1,6 +1,7 @@
 import { Combobox } from "@headlessui/react";
 import { sortBy } from "lodash-es";
-import React, { FC, useMemo, useRef, useState } from "react";
+import type { FC } from "react";
+import React, { useMemo, useRef, useState } from "react";
 import { usePopper } from "react-popper";
 // plane imports
 import { useOutsideClickDetector } from "@plane/hooks";
@@ -9,7 +10,7 @@ import { useDropdownKeyPressed } from "../hooks/use-dropdown-key-pressed";
 import { cn } from "../utils";
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";
-import { ISingleSelectDropdown } from "./dropdown";
+import type { ISingleSelectDropdown } from "./dropdown";
 
 export const Dropdown: FC<ISingleSelectDropdown> = (props) => {
   const {

packages/ui/src/dropdowns/combo-box.tsx

@@ -1,15 +1,6 @@
 import { Combobox } from "@headlessui/react";
-import React, {
-  ElementType,
-  Fragment,
-  KeyboardEventHandler,
-  ReactNode,
-  Ref,
-  forwardRef,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import type { ElementType, KeyboardEventHandler, ReactNode, Ref } from "react";
+import React, { Fragment, forwardRef, useEffect, useRef, useState } from "react";
 
 type Props = {
   as?: ElementType | undefined;

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

@@ -4,7 +4,8 @@ import { ChevronRightIcon } from "@plane/propel/icons";
 // helpers
 import { cn } from "../../utils";
 // types
-import { TContextMenuItem, ContextMenuContext, Portal } from "./root";
+import type { TContextMenuItem } from "./root";
+import { ContextMenuContext, Portal } from "./root";
 
 type ContextMenuItemProps = {
   handleActiveItem: () => void;

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

@@ -11,7 +11,7 @@ import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
 // hooks
 // types
-import {
+import type {
   ICustomMenuDropdownProps,
   ICustomMenuItemProps,
   ICustomSubMenuProps,

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

@@ -10,7 +10,7 @@ import { ChevronDownIcon } from "@plane/propel/icons";
 import { Tooltip } from "@plane/propel/tooltip";
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 import { cn } from "../utils";
-import { ICustomSearchSelectProps } from "./helper";
+import type { ICustomSearchSelectProps } from "./helper";
 
 export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
   const {

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

@@ -11,7 +11,7 @@ import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // helpers
 import { cn } from "../utils";
 // types
-import { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
+import type { ICustomSelectItemProps, ICustomSelectProps } from "./helper";
 
 const CustomSelect = (props: ICustomSelectProps) => {
   const {

packages/ui/src/dropdowns/helper.tsx

@@ -1,5 +1,5 @@
 // FIXME: fix this!!!
-import { ICustomSearchSelectOption } from "@plane/types";
+import type { ICustomSearchSelectOption } from "@plane/types";
 
 type Placement =
   | "top"

packages/ui/src/header/header.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import { ERowVariant, Row } from "../row";
 import { cn } from "../utils";
-import { EHeaderVariant, getHeaderStyle, THeaderVariant } from "./helper";
+import type { THeaderVariant } from "./helper";
+import { EHeaderVariant, getHeaderStyle } from "./helper";
 
 export interface HeaderProps {
   variant?: THeaderVariant;

packages/ui/src/link/block.tsx

@@ -1,8 +1,9 @@
-import React, { FC } from "react";
+import type { FC } from "react";
+import React from "react";
 // plane utils
 import { calculateTimeAgo, cn, getIconForLink } from "@plane/utils";
 // plane ui
-import { TContextMenuItem } from "../dropdowns/context-menu/root";
+import type { TContextMenuItem } from "../dropdowns/context-menu/root";
 import { CustomMenu } from "../dropdowns/custom-menu";
 
 export type TLinkItemBlockProps = {

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

@@ -1,7 +1,9 @@
-import { AlertTriangle, Info, LucideIcon } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { AlertTriangle, Info } from "lucide-react";
 import React from "react";
 // components
-import { Button, TButtonVariant } from "../button";
+import type { TButtonVariant } from "../button";
+import { Button } from "../button";
 import { cn } from "../utils";
 import { EModalPosition, EModalWidth } from "./constants";
 import { ModalCore } from "./modal-core";

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

@@ -4,7 +4,7 @@ import { cn } from "../utils";
 import { Popover } from "./popover";
 // helpers
 // types
-import { TPopoverMenu } from "./types";
+import type { TPopoverMenu } from "./types";
 
 export const PopoverMenu = <T,>(props: TPopoverMenu<T>) => {
   const {

packages/ui/src/popovers/popover.tsx

@@ -1,11 +1,12 @@
 import { Popover as HeadlessReactPopover, Transition } from "@headlessui/react";
 import { EllipsisVertical } from "lucide-react";
-import React, { Fragment, Ref, useState } from "react";
+import type { Ref } from "react";
+import React, { Fragment, useState } from "react";
 import { usePopper } from "react-popper";
 // helpers
 import { cn } from "../utils";
 // types
-import { TPopover } from "./types";
+import type { TPopover } from "./types";
 
 export const Popover = (props: TPopover) => {
   const {

packages/ui/src/popovers/types.ts

@@ -1,5 +1,5 @@
-import { Placement } from "@popperjs/core";
-import { MutableRefObject, ReactNode } from "react";
+import type { Placement } from "@popperjs/core";
+import type { MutableRefObject, ReactNode } from "react";
 
 export type TPopoverButtonDefaultOptions = {
   // button and button styling

packages/ui/src/progress/radial-progress.tsx

@@ -1,4 +1,5 @@
-import React, { useState, useEffect, FC } from "react";
+import type { FC } from "react";
+import React, { useState, useEffect } from "react";
 
 interface IRadialProgressBar {
   progress: number;

packages/ui/src/row/row.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { cn } from "../utils";
-import { ERowVariant, rowStyle, TRowVariant } from "./helper";
+import type { TRowVariant } from "./helper";
+import { ERowVariant, rowStyle } from "./helper";
 
 export interface RowProps extends React.HTMLAttributes<HTMLDivElement> {
   variant?: TRowVariant;

packages/ui/src/scroll-area.tsx

@@ -1,6 +1,7 @@
 "use client";
 import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import React, { FC } from "react";
+import type { FC } from "react";
+import React from "react";
 import { cn } from "./utils";
 
 type TScrollAreaProps = {

packages/ui/src/tables/table.tsx

@@ -2,7 +2,7 @@ import React from "react";
 // helpers
 import { cn } from "../utils";
 // types
-import { TTableData } from "./types";
+import type { TTableData } from "./types";
 
 export const Table = <T,>(props: TTableData<T>) => {
   const {

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

@@ -1,6 +1,7 @@
 import { Tab } from "@headlessui/react";
-import { LucideProps } from "lucide-react";
-import React, { FC } from "react";
+import type { LucideProps } from "lucide-react";
+import type { FC } from "react";
+import React from "react";
 // helpers
 import { cn } from "../utils";
 

packages/ui/src/tabs/tabs.tsx

@@ -1,10 +1,12 @@
 import { Tab } from "@headlessui/react";
-import React, { FC, Fragment, useEffect, useState } from "react";
+import type { FC } from "react";
+import React, { Fragment, useEffect, useState } from "react";
 // helpers
 import { useLocalStorage } from "@plane/hooks";
 import { cn } from "../utils";
 // types
-import { TabList, TabListItem } from "./tab-list";
+import type { TabListItem } from "./tab-list";
+import { TabList } from "./tab-list";
 
 export type TabContent = {
   content: React.ReactNode;

packages/ui/src/tag/tag.tsx

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

packages/ui/src/utils/classname.tsx

@@ -1,4 +1,5 @@
-import { clsx, type ClassValue } from "clsx";
+import { clsx } from "clsx";
+import type { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));