refactor(ui-kit): remove cycle dependencies (#6841)

## Links to any relevant issues

Closes #6520 

## Type of change

Choose a type of change, and delete any options that are not relevant.

- Bug fix (a non-breaking change which fixes an issue)
- Enhancement (a non-breaking change which adds functionality)
- Breaking change (fix or feature that would cause existing
functionality to not work as expected)
- Documentation Fix

## How the change has been tested

Describe the tests that you ran to verify your changes.

Make sure to provide instructions for the maintainer as well as any
relevant configurations.

- [ ] Basic tests (linting, compilation, formatting, unit/integration
tests)
- [ ] Patch-specific tests (correctness, functionality coverage)

### Infrastructure QA (only required for crates that are maintained by
@iotaledger/infrastructure)

- [ ] Synchronization of the indexer from genesis for a network
including migration objects.
- [ ] Restart of indexer synchronization locally without resetting the
database.
- [ ] Restart of indexer synchronization on a production-like database.
- [ ] Deployment of services using Docker.
- [ ] Verification of API backward compatibility.

## Change checklist

Tick the boxes that are relevant to your changes, and delete any items
that are not.

- [ ] I have followed the contribution guidelines for this project
- [ ] I have performed a self-review of my own code
- [ ] I have commented my code, particularly in hard-to-understand areas
- [ ] I have made corresponding changes to the documentation
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] I have checked that new and existing unit tests pass locally with
my changes

### Release Notes

<!--
Check each box that your changes affect. If none of the boxes relate to
your changes, release notes aren't required.

For each box you select, include information after the relevant heading
that describes the impact of your changes that a user might notice and
any actions they must take to implement updates.
-->

- [ ] Protocol:
- [ ] Nodes (Validators and Full nodes):
- [ ] Indexer:
- [ ] JSON-RPC:
- [ ] GraphQL:
- [ ] CLI:
- [ ] Rust SDK:
- [ ] REST API:

---------

Co-authored-by: evavirseda <[email protected]>
Co-authored-by: Marc Espin <[email protected]>
Co-authored-by: Bran <[email protected]>

Author: 4 people

.changeset/spotty-chicken-film.md

@@ -0,0 +1,5 @@
+---
+'@iota/apps-ui-kit': patch
+---
+
+Update imports to avoid cycle dependencies

.eslintrc.js

@@ -99,6 +99,7 @@ module.exports = {
                 '@typescript-eslint/consistent-type-imports': ['error'],
                 'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
                 '@typescript-eslint/no-explicit-any': 'off',
+                'import/no-cycle': ['error'],
             },
         },
         {

apps/ui-kit/src/lib/components/atoms/list-item/ListItem.tsx

@@ -4,7 +4,7 @@
 import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowRight } from '@iota/apps-ui-icons';
-import { Button, ButtonSize, ButtonType } from '@/components';
+import { Button, ButtonSize, ButtonType } from '../button';
 
 export interface ListItemProps {
     /**

apps/ui-kit/src/lib/components/atoms/snackbar/Snackbar.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@iota/apps-ui-icons';
 import { SnackbarType } from './snackbar.enums';
-import { BACKGROUND_COLOR, TEXT_COLOR } from '@/components/atoms/snackbar/snackbar.classes';
+import { BACKGROUND_COLOR, TEXT_COLOR } from './snackbar.classes';
 
 type Renderable = JSX.Element | string | null;
 export interface SnackbarProps {

apps/ui-kit/src/lib/components/molecules/account/Account.tsx

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { ButtonUnstyled } from '../../atoms/button';
-import type { BadgeType } from '../../atoms';
-import { Badge } from '../../atoms';
+
+import type { BadgeType } from '@/components/atoms';
+import { Badge, ButtonUnstyled } from '@/components/atoms';
 import {
     LockLocked,
     LockUnlocked,

apps/ui-kit/src/lib/components/molecules/address/Address.tsx

@@ -3,7 +3,7 @@
 
 import cx from 'classnames';
 import { Copy, ArrowTopRight } from '@iota/apps-ui-icons';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 
 interface AddressProps {
     /**

apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx

@@ -3,7 +3,7 @@
 
 import { ArrowRight } from '@iota/apps-ui-icons';
 import { CardActionType } from './card.enums';
-import { Button, ButtonSize, ButtonType } from '../../atoms/button';
+import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 
 export type CardActionProps = {
     title?: string;

apps/ui-kit/src/lib/components/molecules/card/CardBody.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 import cx from 'classnames';
 import type { ReactNode } from 'react';
-import { Tooltip } from '../../atoms';
-import type { TooltipPosition } from '../../atoms';
+import { Tooltip } from '@/components/atoms/tooltip';
+import type { TooltipPosition } from '@/components/atoms/tooltip';
 
 export type CardBodyProps = {
     title: string;

apps/ui-kit/src/lib/components/molecules/chip/Chip.tsx

@@ -11,7 +11,7 @@ import {
     TEXT_COLOR,
     FOCUS_CLASSES,
 } from './chip.classes';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import { Close } from '@iota/apps-ui-icons';
 
 interface ChipProps {

apps/ui-kit/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { ReactNode } from 'react';
-import type { TooltipPosition } from '../../atoms';
-import { Tooltip } from '../../atoms';
+import type { TooltipPosition } from '@/components/atoms';
+import { Tooltip } from '@/components/atoms';
 import { Info } from '@iota/apps-ui-icons';
 import { DisplayStatsType, DisplayStatsSize } from './displayStats.enums';
 import cx from 'classnames';

apps/ui-kit/src/lib/components/molecules/input/Input.tsx

@@ -13,9 +13,9 @@ import {
     INPUT_PLACEHOLDER_CLASSES,
 } from './input.classes';
 import { InputType } from './input.enums';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { Close, VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import type { InputPropsByType, NumericFormatInputProps } from './input.types';
 import { NumericFormat } from 'react-number-format';
 

apps/ui-kit/src/lib/components/molecules/input/InputWrapper.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { LABEL_CLASSES } from './input.classes';
 import { createElement } from 'react';
 

apps/ui-kit/src/lib/components/molecules/input/TextArea.tsx

@@ -11,7 +11,7 @@ import {
     INPUT_PLACEHOLDER_CLASSES,
 } from './input.classes';
 import cx from 'classnames';
-import { ButtonUnstyled } from '../../atoms/button';
+import { ButtonUnstyled } from '@/components/atoms/button';
 import { VisibilityOff, VisibilityOn } from '@iota/apps-ui-icons';
 
 type TextAreaProps = Omit<

apps/ui-kit/src/lib/components/molecules/navbar-item/NavbarItemHorizontal.tsx

@@ -13,7 +13,7 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
+import { Badge, BadgeType } from '@/components/atoms';
 import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemHorizontal({

apps/ui-kit/src/lib/components/molecules/navbar-item/NavbarItemVertical.tsx

@@ -9,7 +9,7 @@ import {
     UNSELECTED_ICON,
     UNSELECTED_TEXT,
 } from './navbarItem.classes';
-import { Badge, BadgeType } from '../../atoms';
+import { Badge, BadgeType } from '@/components/atoms';
 import type { NavbarItemProps } from './NavbarItem';
 
 export function NavbarItemVertical({

apps/ui-kit/src/lib/components/molecules/search/Search.tsx

@@ -4,7 +4,8 @@
 import { useEffect, useRef, useState } from 'react';
 import cx from 'classnames';
 import { Loader, Search as SearchIcon } from '@iota/apps-ui-icons';
-import { Divider, SearchBarType } from '@/components';
+import { Divider } from '@/components/atoms';
+import { SearchBarType } from './search.enums';
 import {
     BACKGROUND_COLORS,
     SUGGESTIONS_WRAPPER_STYLE,

apps/ui-kit/src/lib/components/molecules/segmented-button/SegmentedButton.tsx

@@ -5,7 +5,7 @@ import type { PropsWithChildren } from 'react';
 import { BACKGROUND_COLORS, OUTLINED_BORDER } from './segmentedButton.classes';
 import cx from 'classnames';
 import { SegmentedButtonType } from './segmentedButton.enums';
-import { ButtonSegmentType } from '../../atoms';
+import { ButtonSegmentType } from '@/components/atoms';
 
 interface SegmentedButtonProps {
     /**

apps/ui-kit/src/lib/components/molecules/select/Select.tsx

@@ -5,10 +5,9 @@ import { TriangleDown } from '@iota/apps-ui-icons';
 import cx from 'classnames';
 import { forwardRef, useEffect, useState } from 'react';
 import { Dropdown } from '../dropdown/Dropdown';
-import { SecondaryText } from '../../atoms/secondary-text';
+import { SecondaryText } from '@/components/atoms/secondary-text';
 import { InputWrapper, LabelHtmlTag } from '../input/InputWrapper';
-import { ButtonUnstyled } from '../../atoms/button';
-import { ListItem } from '../../atoms';
+import { ListItem, ButtonUnstyled } from '@/components/atoms';
 import { DropdownPosition } from '../dropdown';
 import { SelectSize } from './select.enums';
 

apps/ui-kit/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
-import { Placeholder } from '../../atoms';
+import { Placeholder } from '@/components/atoms';
 
 interface TableCellBaseProps {
     /**

apps/ui-kit/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -3,7 +3,7 @@
 
 import { SortByDown, SortByUp } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Checkbox } from '@/lib';
+import { Checkbox } from '@/components/atoms/checkbox';
 import { TableHeaderCellSortOrder } from './tableHeaderCell.enums';
 
 export interface TableHeaderCellProps {

apps/ui-kit/src/lib/components/molecules/title/Title.tsx

@@ -1,8 +1,8 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import type { TooltipPosition } from '../../atoms';
-import { Tooltip } from '../../atoms';
+import type { TooltipPosition } from '@/components/atoms';
+import { Tooltip } from '@/components/atoms';
 import { Info } from '@iota/apps-ui-icons';
 import { TitleSize } from './titleSize.enums';
 import cx from 'classnames';

apps/ui-kit/src/lib/components/organisms/accordion/Accordion.tsx

@@ -4,7 +4,7 @@
 import type { PropsWithChildren } from 'react';
 import cx from 'classnames';
 import { ArrowDown } from '@iota/apps-ui-icons';
-import { Button, ButtonType } from '@/lib';
+import { Button, ButtonType } from '@/components/atoms';
 import { ICON_STYLE } from './accordion.classes';
 
 export interface AccordionHeaderProps {

apps/ui-kit/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -3,7 +3,8 @@
 
 import { ArrowBack } from '@iota/apps-ui-icons';
 import cx from 'classnames';
-import { Button, ButtonType, NavbarItem, NavbarItemType } from '@/components';
+import { Button, ButtonType } from '@/components/atoms';
+import { NavbarItem, NavbarItemType } from '@/components/molecules';
 import type { NavbarProps } from './Navbar';
 
 export function NavbarSlideout({

apps/ui-kit/src/lib/components/organisms/table/Table.tsx

@@ -4,8 +4,9 @@
 import type { PropsWithChildren, ReactNode } from 'react';
 import cx from 'classnames';
 import { TableProvider, useTableContext } from './TableContext';
-import type { ButtonProps } from '@/lib';
-import { Button, ButtonSize, ButtonType, Checkbox, TableCellBase, TableHeaderCell } from '@/lib';
+import type { ButtonProps } from '@/components/atoms';
+import { Button, ButtonSize, ButtonType, Checkbox } from '@/components/atoms';
+import { TableCellBase, TableHeaderCell } from '@/components/molecules';
 import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
 
 export interface TablePaginationOptions {