build(ui): Sort imports and enforce absolute imports with aliases (#13113)

datahub-web-react/.eslintignore

@@ -2,3 +2,4 @@
 dist/
 build/
 node_modules/
+**/*.generated.ts

datahub-web-react/.eslintrc.js

@@ -8,7 +8,7 @@ module.exports = {
         'plugin:vitest/recommended',
         'prettier',
     ],
-    plugins: ['@typescript-eslint', '@stylistic/js', 'react-refresh'],
+    plugins: ['@typescript-eslint', '@stylistic/js', 'react-refresh', 'import-alias'],
     parserOptions: {
         ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
         sourceType: 'module', // Allows for the use of imports
@@ -23,6 +23,7 @@ module.exports = {
         'arrow-body-style': 'off',
         'class-methods-use-this': 'off',
         'import/no-extraneous-dependencies': 'off',
+        'import/no-relative-packages': 'error',
         'import/prefer-default-export': 'off', // TODO: remove this lint rule
         'no-console': 'off',
         'no-plusplus': 'off',
@@ -50,18 +51,36 @@ module.exports = {
         'vitest/prefer-to-be': 'off',
         '@typescript-eslint/no-use-before-define': ['error', { functions: false, classes: false }],
         'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
+        'import-alias/import-alias': [
+            'error',
+            {
+                aliases: [
+                    // Must be kept consistent with tsconfig.json, vite.config.ts, and .prettierrc.js
+                    { alias: '@components/', matcher: '^src/alchemy-components/' },
+                    { alias: '@app/', matcher: '^src/app/' },
+                    { alias: '@conf/', matcher: '^src/conf/' },
+                    { alias: '@graphql/', matcher: '^src/graphql/' },
+                    { alias: '@graphql-mock/', matcher: '^src/graphql-mock/' },
+                    { alias: '@images/', matcher: '^src/images/' },
+                    { alias: '@providers/', matcher: '^src/providers/' },
+                    { alias: '@utils/', matcher: '^src/utils/' },
+                    { alias: '@types', matcher: '^src/types.generated' },
+                    { alias: '@src/', matcher: '^src/' },
+                ],
+            },
+        ],
     },
     settings: {
         react: {
             version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
         },
     },
-	overrides: [
-		{
-			files: ['src/app/searchV2/**/*.tsx', 'src/app/entityV2/**/*.tsx'],
-			rules: {
-				'import/no-cycle': 'off',
-			},
-		},
-	],
+    overrides: [
+        {
+            files: ['src/app/searchV2/**/*.tsx', 'src/app/entityV2/**/*.tsx'],
+            rules: {
+                'import/no-cycle': 'off',
+            },
+        },
+    ],
 };

datahub-web-react/.prettierrc.js

@@ -4,4 +4,16 @@ module.exports = {
     singleQuote: true,
     printWidth: 120,
     tabWidth: 4,
+    plugins: ['@trivago/prettier-plugin-sort-imports'],
+    importOrder: [
+        // Third party imports are first automatically, in their own group
+        '^@components/(.*)$',
+        // Have to specify all aliases otherwise they're considered third party
+        '^(@app|@conf|@providers|@utils|@src)/(.*)$',
+        '^(@graphql/|@graphql-mock/|@types)(.*)$',
+        '^@images/(.*)$',
+        '^[./]',
+    ],
+    importOrderSeparation: true,
+    importOrderSortSpecifiers: true,
 };

datahub-web-react/package.json

@@ -110,7 +110,7 @@
         "test-coverage": "yarn test run --coverage",
         "generate": "NODE_OPTIONS='--max-old-space-size=5120 --openssl-legacy-provider' graphql-codegen --config codegen.yml",
         "lint": "eslint . --ext .ts,.tsx --quiet && yarn format-check && yarn type-check",
-        "lint-fix": "eslint '*/**/*.{ts,tsx}' --quiet --fix && yarn format",
+        "lint-fix": "eslint . --ext .ts,.tsx --quiet --fix && yarn format",
         "format-check": "prettier --check src",
         "format": "prettier --write src",
         "type-check": "tsc --noEmit",
@@ -146,6 +146,7 @@
         "@storybook/test": "^8.1.11",
         "@storybook/theming": "^8.1.11",
         "@stylistic/eslint-plugin-js": "^3.1.0",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.2",
         "@types/graphql": "^14.5.0",
         "@types/query-string": "^6.3.0",
         "@types/styled-components": "^5.1.7",
@@ -158,6 +159,7 @@
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-plugin-import": "^2.25.3",
+        "eslint-plugin-import-alias": "^1.2.0",
         "eslint-plugin-jsx-a11y": "^6.5.1",
         "eslint-plugin-react": "^7.28.0",
         "eslint-plugin-react-hooks": "^4.3.0",
@@ -165,7 +167,7 @@
         "eslint-plugin-vitest": "^0.3.17",
         "jsdom": "^22.1.0",
         "less": "^4.2.0",
-        "prettier": "^2.8.8",
+        "prettier": "^3.5.3",
         "source-map-explorer": "^2.5.2",
         "storybook": "^8.1.11",
         "vite": "^4.5.6",

datahub-web-react/src/App.less

@@ -7,5 +7,7 @@
 @font-face {
     font-family: 'Manrope';
     font-style: normal;
-    src: local('Manrope'), url('./fonts/manrope.woff2') format('woff2');
+    src:
+        local('Manrope'),
+        url('./fonts/manrope.woff2') format('woff2');
 }

datahub-web-react/src/App.test.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
-import { render } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import { InnerApp } from './App';
-import { mocks } from './Mocks';
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import { InnerApp } from '@src/App';
+import { mocks } from '@src/Mocks';
 
 // eslint-disable-next-line vitest/expect-expect
 test('renders the app', async () => {

datahub-web-react/src/App.tsx

@@ -1,19 +1,20 @@
-import React from 'react';
-import Cookies from 'js-cookie';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache, ServerError } from '@apollo/client';
+import { ApolloClient, ApolloProvider, InMemoryCache, ServerError, createHttpLink } from '@apollo/client';
 import { onError } from '@apollo/client/link/error';
+import Cookies from 'js-cookie';
+import React from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import './App.less';
-import './AppV2.less';
-import { Routes } from './app/Routes';
-import { PageRoutes } from './conf/Global';
-import { isLoggedInVar } from './app/auth/checkAuthStatus';
-import { GlobalCfg } from './conf';
-import possibleTypesResult from './possibleTypes.generated';
-import { ErrorCodes } from './app/shared/constants';
-import CustomThemeProvider from './CustomThemeProvider';
-import { useCustomTheme } from './customThemeContext';
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import { Routes } from '@app/Routes';
+import { isLoggedInVar } from '@app/auth/checkAuthStatus';
+import { ErrorCodes } from '@app/shared/constants';
+import { PageRoutes } from '@conf/Global';
+import '@src/App.less';
+import '@src/AppV2.less';
+import CustomThemeProvider from '@src/CustomThemeProvider';
+import { GlobalCfg } from '@src/conf';
+import { useCustomTheme } from '@src/customThemeContext';
+import possibleTypesResult from '@src/possibleTypes.generated';
 
 /*
     Construct Apollo Client

datahub-web-react/src/AppConfigProvider.tsx

@@ -1,9 +1,11 @@
 import React, { useEffect } from 'react';
-import './App.less';
-import { THIRD_PARTY_LOGGING_KEY } from './app/analytics/analytics';
-import { checkAuthStatus } from './app/auth/checkAuthStatus';
-import { AppConfigContext, DEFAULT_APP_CONFIG } from './appConfigContext';
-import { useAppConfigQuery } from './graphql/app.generated';
+
+import { THIRD_PARTY_LOGGING_KEY } from '@app/analytics/analytics';
+import { checkAuthStatus } from '@app/auth/checkAuthStatus';
+import '@src/App.less';
+import { AppConfigContext, DEFAULT_APP_CONFIG } from '@src/appConfigContext';
+
+import { useAppConfigQuery } from '@graphql/app.generated';
 
 function changeFavicon(src) {
     const links = document.querySelectorAll("link[rel~='icon']") as any;

datahub-web-react/src/AppV2.less

@@ -7,7 +7,9 @@
 @font-face {
     font-family: 'Manrope';
     font-style: normal;
-    src: local('Manrope'), url('./fonts/manrope.woff2') format('woff2');
+    src:
+        local('Manrope'),
+        url('./fonts/manrope.woff2') format('woff2');
 }
 
 @font-face {

datahub-web-react/src/CustomThemeProvider.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { Theme } from './conf/theme/types';
-import defaultThemeConfig from './conf/theme/theme_light.config.json';
-import { CustomThemeContext } from './customThemeContext';
+
+import defaultThemeConfig from '@conf/theme/theme_light.config.json';
+import { Theme } from '@conf/theme/types';
+import { CustomThemeContext } from '@src/customThemeContext';
 
 interface Props {
     children: React.ReactNode;

datahub-web-react/src/Mocks.tsx

@@ -1,64 +1,66 @@
 import React from 'react';
-import { GetDatasetDocument, UpdateDatasetDocument, GetDatasetSchemaDocument } from './graphql/dataset.generated';
-import { GetDataFlowDocument } from './graphql/dataFlow.generated';
-import { GetDataJobDocument } from './graphql/dataJob.generated';
-import { GetBrowsePathsDocument, GetBrowseResultsDocument } from './graphql/browse.generated';
+
+import { Entity } from '@app/entity/Entity';
+import { VIEW_ENTITY_PAGE } from '@app/entity/shared/constants';
+import { GenericEntityProperties } from '@app/entity/shared/types';
+import { ViewBuilderState } from '@app/entity/view/types';
+import { EntityCapabilityType } from '@app/entityV2/Entity';
+import { FetchedEntity } from '@app/lineage/types';
+import { DEFAULT_APP_CONFIG } from '@src/appConfigContext';
+
+import { AppConfigDocument, GetEntityCountsDocument } from '@graphql/app.generated';
+import { GetBrowsePathsDocument, GetBrowseResultsDocument } from '@graphql/browse.generated';
+import { GetDataFlowDocument } from '@graphql/dataFlow.generated';
+import { GetDataJobDocument } from '@graphql/dataJob.generated';
+import { GetDatasetDocument, GetDatasetSchemaDocument, UpdateDatasetDocument } from '@graphql/dataset.generated';
+import { GetGlossaryTermDocument, GetGlossaryTermQuery } from '@graphql/glossaryTerm.generated';
+import { GetMeDocument } from '@graphql/me.generated';
+import { GetMlModelDocument } from '@graphql/mlModel.generated';
+import { GetMlModelGroupDocument } from '@graphql/mlModelGroup.generated';
+import { GetGrantedPrivilegesDocument } from '@graphql/policy.generated';
+import { GetQuickFiltersDocument } from '@graphql/quickFilters.generated';
+import { ListRecommendationsDocument } from '@graphql/recommendations.generated';
 import {
-    GetAutoCompleteResultsDocument,
     GetAutoCompleteMultipleResultsDocument,
+    GetAutoCompleteResultsDocument,
     GetSearchResultsDocument,
-    GetSearchResultsQuery,
     GetSearchResultsForMultipleDocument,
     GetSearchResultsForMultipleQuery,
-} from './graphql/search.generated';
-import { GetUserDocument } from './graphql/user.generated';
+    GetSearchResultsQuery,
+} from '@graphql/search.generated';
+import { GetTagDocument } from '@graphql/tag.generated';
+import { GetUserDocument } from '@graphql/user.generated';
 import {
-    Dataset,
-    DataFlow,
-    DataJob,
-    GlossaryTerm,
-    GlossaryNode,
-    EntityType,
-    PlatformType,
-    MlModel,
-    MlModelGroup,
-    SchemaFieldDataType,
-    ScenarioType,
-    RecommendationRenderType,
-    RelationshipDirection,
-    Container,
-    PlatformPrivileges,
-    FilterOperator,
     AppConfig,
-    EntityPrivileges,
     BusinessAttribute,
-    EntityRelationshipsResult,
-    Maybe,
-    SearchResult,
-    DataHubViewType,
-    LogicalOperator,
+    Container,
+    DataFlow,
     DataHubView,
     DataHubViewFilter,
+    DataHubViewType,
+    DataJob,
+    Dataset,
+    EntityPrivileges,
+    EntityRelationshipsResult,
+    EntityType,
+    FilterOperator,
     GlobalTags,
-    OwnershipType,
+    GlossaryNode,
+    GlossaryTerm,
+    LogicalOperator,
+    Maybe,
+    MlModel,
+    MlModelGroup,
     Owner,
-} from './types.generated';
-import { GetTagDocument } from './graphql/tag.generated';
-import { GetMlModelDocument } from './graphql/mlModel.generated';
-import { GetMlModelGroupDocument } from './graphql/mlModelGroup.generated';
-import { GetGlossaryTermDocument, GetGlossaryTermQuery } from './graphql/glossaryTerm.generated';
-import { GetEntityCountsDocument, AppConfigDocument } from './graphql/app.generated';
-import { GetMeDocument } from './graphql/me.generated';
-import { ListRecommendationsDocument } from './graphql/recommendations.generated';
-import { FetchedEntity } from './app/lineage/types';
-import { DEFAULT_APP_CONFIG } from './appConfigContext';
-import { GetQuickFiltersDocument } from './graphql/quickFilters.generated';
-import { GetGrantedPrivilegesDocument } from './graphql/policy.generated';
-import { VIEW_ENTITY_PAGE } from './app/entity/shared/constants';
-import { Entity } from './app/entity/Entity';
-import { GenericEntityProperties } from './app/entity/shared/types';
-import { ViewBuilderState } from './app/entity/view/types';
-import { EntityCapabilityType } from './app/entityV2/Entity';
+    OwnershipType,
+    PlatformPrivileges,
+    PlatformType,
+    RecommendationRenderType,
+    RelationshipDirection,
+    ScenarioType,
+    SchemaFieldDataType,
+    SearchResult,
+} from '@types';
 
 export const entityPrivileges: EntityPrivileges = {
     canEditLineage: true,

datahub-web-react/src/alchemy-components/.docs/Icons.mdx

@@ -1,6 +1,7 @@
 import { Meta, Source } from '@storybook/blocks';
 
 import { AVAILABLE_ICONS } from '@components';
+
 import { IconGalleryWithSearch } from './mdx-components';
 
 <Meta title="Icons" />

datahub-web-react/src/alchemy-components/.docs/Intro.mdx

@@ -1,4 +1,5 @@
-import { Meta, Description } from '@storybook/blocks';
+import { Description, Meta } from '@storybook/blocks';
+
 import ReadMe from '../README.mdx';
 
 <Meta title="Introduction" />

datahub-web-react/src/alchemy-components/.docs/StyleGuide.mdx

@@ -1,18 +1,19 @@
 import { Meta, Source } from '@storybook/blocks';
 
 import { Heading } from '@components';
+
 import { colors } from '@components/theme';
 
-import { Grid, FlexGrid, ColorCard, CopyButton, Seperator } from './mdx-components';
+import { ColorCard, CopyButton, FlexGrid, Grid, Seperator } from './mdx-components';
 
 import borderSource from '@components/theme/foundations/borders?raw';
 import colorsSource from '@components/theme/foundations/colors?raw';
-import typographySource from '@components/theme/foundations/typography?raw';
 import radiusSource from '@components/theme/foundations/radius?raw';
 import shadowsSource from '@components/theme/foundations/shadows?raw';
 import sizesSource from '@components/theme/foundations/sizes?raw';
 import spacingSource from '@components/theme/foundations/spacing?raw';
 import transitionSource from '@components/theme/foundations/transition?raw';
+import typographySource from '@components/theme/foundations/typography?raw';
 import zIndexSource from '@components/theme/foundations/zIndex?raw';
 
 <Meta title="Style Guide" />

datahub-web-react/src/alchemy-components/.docs/mdx-components/CodeBlock.tsx

@@ -1,7 +1,6 @@
+import { DocsContext, Source } from '@storybook/blocks';
 import React from 'react';
 
-import { Source, DocsContext } from '@storybook/blocks';
-
 export const CodeBlock = () => {
     const context = React.useContext(DocsContext);
 

datahub-web-react/src/alchemy-components/.docs/mdx-components/CopyButton.tsx

@@ -1,6 +1,6 @@
+import { Button, Icon } from '@components';
 import React from 'react';
 
-import { Button, Icon } from '@components';
 import { copyToClipboard } from './utils';
 
 interface Props {

datahub-web-react/src/alchemy-components/.docs/mdx-components/GridList.tsx

@@ -1,7 +1,6 @@
 /* 
  Docs Only Component that helps to display a list of components in a grid layout.
 */
-
 import React, { ReactNode } from 'react';
 
 const styles = {

datahub-web-react/src/alchemy-components/.docs/mdx-components/IconGalleryWithSearch.tsx

@@ -1,7 +1,7 @@
+import { Button, ButtonProps, Icon } from '@components';
 import React, { useState } from 'react';
 
-import { Icon, Button, ButtonProps } from '@components';
-import { IconGrid, IconGridItem, IconDisplayBlock } from './components';
+import { IconDisplayBlock, IconGrid, IconGridItem } from './components';
 
 interface Props {
     icons: string[];

datahub-web-react/src/alchemy-components/.docs/mdx-components/components.ts

@@ -1,7 +1,6 @@
 /* 
 	Docs Only Components that helps to display information in info guides.
 */
-
 import styled from 'styled-components';
 
 import theme from '@components/theme';

datahub-web-react/src/alchemy-components/README.mdx

@@ -42,9 +42,9 @@ You can access the theme types at `@components/theme/types` and the theme config
 
 Our docs are generated using [Storybook](https://storybook.js.org/) and deployed to [Cloudfare](https://www.cloudflare.com/).
 
--   Storybook config is located at `.storybook`
--   Static doc files are located at `alchemy-components/.docs`
--   Component stories are located in each component directory: <br/>`alchemy-components/components/Component/Component.stories.tsx`
+- Storybook config is located at `.storybook`
+- Static doc files are located at `alchemy-components/.docs`
+- Component stories are located in each component directory: <br/>`alchemy-components/components/Component/Component.stories.tsx`
 
 Storybook serves as our playground for developing components. You can start it locally:
 
@@ -58,16 +58,16 @@ This launches the docs app at `localhost:6006` and enables everything you need t
 
 Building a component library is a collaboriate effort! We're aiming to provide a first-class experience, so here's a list of the standards we'll be looking for:
 
--   Consitent prop and variant naming conventions: <br />
-    -- `variant` is used to define style types, such as `outline` or `filled`. <br />
-    -- `color` is used to define the components color, such as `violet` or `blue`. <br />
-    -- `size` is used to define the components size, such as `xs` or `4xl`. <br />
-    -- Booleans are prefixed with `is`: `isLoading` or `isDisabled`.
--   All style props have a correseponding theme type, ie. `FontSizeOptions`.
--   All components have an export of default props.
--   Styles are defined using `style objects` instead of `tagged template literals`.
--   Stories are organized into the correct directory .
+- Consitent prop and variant naming conventions: <br />
+  -- `variant` is used to define style types, such as `outline` or `filled`. <br />
+  -- `color` is used to define the components color, such as `violet` or `blue`. <br />
+  -- `size` is used to define the components size, such as `xs` or `4xl`. <br />
+  -- Booleans are prefixed with `is`: `isLoading` or `isDisabled`.
+- All style props have a correseponding theme type, ie. `FontSizeOptions`.
+- All components have an export of default props.
+- Styles are defined using `style objects` instead of `tagged template literals`.
+- Stories are organized into the correct directory .
 
 ### FAQs
 
--   **How are components being styled?** <br />Our components are built using [Styled Components](https://styled-components.com/) that dynamically generate styles based on variant selection.
+- **How are components being styled?** <br />Our components are built using [Styled Components](https://styled-components.com/) that dynamically generate styles based on variant selection.

datahub-web-react/src/alchemy-components/components/AutoComplete/AutoComplete.stories.tsx

@@ -1,7 +1,8 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import AutoComplete from './AutoComplete';
+
+import AutoComplete from '@components/components/AutoComplete/AutoComplete';
 
 // Auto Docs
 const meta = {

datahub-web-react/src/alchemy-components/components/AutoComplete/AutoComplete.tsx

@@ -1,10 +1,15 @@
 import { AutoComplete as AntdAutoComplete } from 'antd';
 import React, { useCallback, useEffect, useState } from 'react';
-import ClickOutside from '../Utils/ClickOutside/ClickOutside';
-import { DropdownWrapper } from './components';
-import { AUTOCOMPLETE_WRAPPER_CLASS_CSS_SELECTOR, AUTOCOMPLETE_WRAPPER_CLASS_NAME, ESCAPE_KEY } from './constants';
-import { AutoCompleteProps, OptionType } from './types';
-import { OverlayClassProvider } from '../Utils';
+
+import { DropdownWrapper } from '@components/components/AutoComplete/components';
+import {
+    AUTOCOMPLETE_WRAPPER_CLASS_CSS_SELECTOR,
+    AUTOCOMPLETE_WRAPPER_CLASS_NAME,
+    ESCAPE_KEY,
+} from '@components/components/AutoComplete/constants';
+import { AutoCompleteProps, OptionType } from '@components/components/AutoComplete/types';
+import { OverlayClassProvider } from '@components/components/Utils';
+import ClickOutside from '@components/components/Utils/ClickOutside/ClickOutside';
 
 export default function AutoComplete({
     children,

datahub-web-react/src/alchemy-components/components/AutoComplete/index.ts

@@ -1,3 +1,3 @@
-import AutoComplete from './AutoComplete';
+import AutoComplete from '@components/components/AutoComplete/AutoComplete';
 
 export { AutoComplete };

datahub-web-react/src/alchemy-components/components/Avatar/Avatar.stories.tsx

@@ -1,8 +1,10 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import { GridList } from '@src/alchemy-components/.docs/mdx-components';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import { Avatar, avatarDefaults } from './Avatar';
+
+import { Avatar, avatarDefaults } from '@components/components/Avatar/Avatar';
+
+import { GridList } from '@src/alchemy-components/.docs/mdx-components';
 
 const IMAGE_URL =
     'https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/78/cb/e1/78cbe16d-28d9-057e-9f73-524c32eb5fe5/AppIcon-0-0-1x_U007emarketing-0-7-0-85-220.png/512x512bb.jpg';

datahub-web-react/src/alchemy-components/components/Avatar/Avatar.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
-import { AvatarImage, AvatarImageWrapper, AvatarText, Container } from './components';
-import { AvatarProps } from './types';
-import getAvatarColor, { getNameInitials } from './utils';
+
+import { AvatarImage, AvatarImageWrapper, AvatarText, Container } from '@components/components/Avatar/components';
+import { AvatarProps } from '@components/components/Avatar/types';
+import getAvatarColor, { getNameInitials } from '@components/components/Avatar/utils';
 
 export const avatarDefaults: AvatarProps = {
     name: 'User name',

datahub-web-react/src/alchemy-components/components/Avatar/_tests_/getNameInitials.test.ts

@@ -1,4 +1,4 @@
-import { getNameInitials } from '../utils';
+import { getNameInitials } from '@components/components/Avatar/utils';
 
 describe('get initials of the name', () => {
     it('get initials of name with first name and last name', () => {

datahub-web-react/src/alchemy-components/components/Avatar/components.ts

@@ -1,7 +1,9 @@
+import styled from 'styled-components';
+
+import { getAvatarColorStyles, getAvatarNameSizes, getAvatarSizes } from '@components/components/Avatar/utils';
+
 import { colors } from '@src/alchemy-components/theme';
 import { AvatarSizeOptions } from '@src/alchemy-components/theme/config';
-import styled from 'styled-components';
-import { getAvatarColorStyles, getAvatarNameSizes, getAvatarSizes } from './utils';
 
 export const Container = styled.div<{ $hasOnClick: boolean; $showInPill?: boolean }>`
     display: inline-flex;

datahub-web-react/src/alchemy-components/components/AvatarStack/AvatarStack.stories.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { AvatarStack, avatarListDefaults } from './AvatarStack';
+import React from 'react';
+
+import { AvatarStack, avatarListDefaults } from '@components/components/AvatarStack/AvatarStack';
 
 // Meta Configuration
 const meta = {

datahub-web-react/src/alchemy-components/components/AvatarStack/AvatarStack.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { AvatarContainer, AvatarStackContainer } from './components';
-import { Avatar } from '../Avatar';
-import { AvatarItemProps, AvatarStackProps } from './types';
+
+import { Avatar } from '@components/components/Avatar';
+import { AvatarContainer, AvatarStackContainer } from '@components/components/AvatarStack/components';
+import { AvatarItemProps, AvatarStackProps } from '@components/components/AvatarStack/types';
 
 export const avatarListDefaults: AvatarStackProps = {
     avatars: [

datahub-web-react/src/alchemy-components/components/Badge/Badge.stories.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
-
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
 
 import { GridList } from '@components/.docs/mdx-components';
-import { Badge, badgeDefault } from './Badge';
-import pillMeta from '../Pills/Pill.stories';
-import { omitKeys } from './utils';
+import { Badge, badgeDefault } from '@components/components/Badge/Badge';
+import { omitKeys } from '@components/components/Badge/utils';
+import pillMeta from '@components/components/Pills/Pill.stories';
 
 const pillMetaArgTypes = omitKeys(pillMeta.argTypes, ['label']);
 const pillMetaArgs = omitKeys(pillMeta.args, ['label']);

datahub-web-react/src/alchemy-components/components/Badge/Badge.tsx

@@ -1,9 +1,9 @@
 import { Pill } from '@components';
 import React, { useMemo } from 'react';
 
-import { BadgeProps } from './types';
-import { formatBadgeValue } from './utils';
-import { BadgeContainer } from './components';
+import { BadgeContainer } from '@components/components/Badge/components';
+import { BadgeProps } from '@components/components/Badge/types';
+import { formatBadgeValue } from '@components/components/Badge/utils';
 
 export const badgeDefault: BadgeProps = {
     count: 0,

datahub-web-react/src/alchemy-components/components/Badge/types.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react';
-import { PillProps } from '../Pills/types';
+
+import { PillProps } from '@components/components/Pills/types';
 
 export interface BadgeProps extends Omit<PillProps, 'label'>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
     count: number;

datahub-web-react/src/alchemy-components/components/Bar/Bar.stories.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import colors from '@src/alchemy-components/theme/foundations/colors';
+import React from 'react';
 
-import { Bar } from './Bar';
+import { Bar } from '@components/components/Bar/Bar';
+
+import colors from '@src/alchemy-components/theme/foundations/colors';
 
 const meta: Meta<typeof Bar> = {
     title: 'Components / Bar',

datahub-web-react/src/alchemy-components/components/Bar/Bar.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { colors } from '@src/alchemy-components/theme';
 
-import { BarComponentProps } from './types';
-import { BarContainer, IndividualBar } from './components';
-import { BAR_HEIGHT_MULTIPLIER } from './constant';
+import { BarContainer, IndividualBar } from '@components/components/Bar/components';
+import { BAR_HEIGHT_MULTIPLIER } from '@components/components/Bar/constant';
+import { BarComponentProps } from '@components/components/Bar/types';
+
+import { colors } from '@src/alchemy-components/theme';
 
 const defaultProps: BarComponentProps = {
     color: colors.violet[500],

datahub-web-react/src/alchemy-components/components/Bar/components.ts

@@ -11,5 +11,7 @@ export const IndividualBar = styled.div<{ height: number; isColored: boolean; co
     height: ${(props) => props.height}px;
     background-color: ${(props) => (props.isColored ? props.color : '#C6C0E0')};
     border-radius: 20px;
-    transition: background-color 0.3s ease, height 0.3s ease;
+    transition:
+        background-color 0.3s ease,
+        height 0.3s ease;
 `;

datahub-web-react/src/alchemy-components/components/BarChart/BarChart.stories.tsx

@@ -1,12 +1,13 @@
-import React from 'react';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { Meta, StoryObj } from '@storybook/react';
-import { BarChart } from './BarChart';
-import { generateMockDataHorizontal, getMockedProps } from './utils';
-import { DEFAULT_MIN_VALUE } from './hooks/usePrepareAccessors';
-import { DEFAULT_MAX_DOMAIN_VALUE } from './hooks/usePrepareScales';
-import { abbreviateNumber } from '../dataviz/utils';
-import { DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL } from './constants';
+import React from 'react';
+
+import { BarChart } from '@components/components/BarChart/BarChart';
+import { DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL } from '@components/components/BarChart/constants';
+import { DEFAULT_MIN_VALUE } from '@components/components/BarChart/hooks/usePrepareAccessors';
+import { DEFAULT_MAX_DOMAIN_VALUE } from '@components/components/BarChart/hooks/usePrepareScales';
+import { generateMockDataHorizontal, getMockedProps } from '@components/components/BarChart/utils';
+import { abbreviateNumber } from '@components/components/dataviz/utils';
 
 const meta = {
     title: 'Charts / BarChart',

datahub-web-react/src/alchemy-components/components/BarChart/BarChart.tsx

@@ -1,20 +1,30 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { colors } from '@src/alchemy-components/theme';
 import { LinearGradient } from '@visx/gradient';
 import { ParentSize } from '@visx/responsive';
 import { Axis, AxisScale, BarSeries, Grid, Tooltip, XYChart } from '@visx/xychart';
-import { Popover } from '../Popover';
-import { ChartWrapper, StyledBarSeries } from './components';
-import { AxisProps, BarChartProps, ColorAccessor, Datum, GridProps, XAccessor, YAccessor } from './types';
-import { getMockedProps } from './utils';
-import useMergedProps from './hooks/useMergedProps';
-import usePrepareScales from './hooks/usePrepareScales';
-import usePrepareAccessors from './hooks/usePrepareAccessors';
-import { COLOR_SCHEME_TO_PARAMS, DEFAULT_COLOR_SCHEME } from './constants';
-import TruncatableTick from './components/TruncatableTick';
-import { barChartDefault } from './defaults';
-import LeftAxisMarginSetter from './components/LeftAxisMarginSetter';
-import { abbreviateNumber } from '../dataviz/utils';
+import React, { useCallback, useMemo, useState } from 'react';
+
+import { ChartWrapper, StyledBarSeries } from '@components/components/BarChart/components';
+import LeftAxisMarginSetter from '@components/components/BarChart/components/LeftAxisMarginSetter';
+import TruncatableTick from '@components/components/BarChart/components/TruncatableTick';
+import { COLOR_SCHEME_TO_PARAMS, DEFAULT_COLOR_SCHEME } from '@components/components/BarChart/constants';
+import { barChartDefault } from '@components/components/BarChart/defaults';
+import useMergedProps from '@components/components/BarChart/hooks/useMergedProps';
+import usePrepareAccessors from '@components/components/BarChart/hooks/usePrepareAccessors';
+import usePrepareScales from '@components/components/BarChart/hooks/usePrepareScales';
+import {
+    AxisProps,
+    BarChartProps,
+    ColorAccessor,
+    Datum,
+    GridProps,
+    XAccessor,
+    YAccessor,
+} from '@components/components/BarChart/types';
+import { getMockedProps } from '@components/components/BarChart/utils';
+import { Popover } from '@components/components/Popover';
+import { abbreviateNumber } from '@components/components/dataviz/utils';
+
+import { colors } from '@src/alchemy-components/theme';
 
 export function BarChart({
     data,

datahub-web-react/src/alchemy-components/components/BarChart/components/LeftAxisMarginSetter.tsx

@@ -1,7 +1,7 @@
+import { TickFormatter } from '@visx/axis';
+import { getTicks } from '@visx/scale';
 import { DataContext } from '@visx/xychart';
 import { useCallback, useContext, useEffect } from 'react';
-import { getTicks } from '@visx/scale';
-import { TickFormatter } from '@visx/axis';
 
 interface LeftAxisMarginSetterProps {
     setLeftMargin?: (margin: number) => void;

datahub-web-react/src/alchemy-components/components/BarChart/components/TruncatableTick.tsx

@@ -1,7 +1,8 @@
-import React from 'react';
 import { Text } from '@visx/text';
-import { Popover } from '../../Popover';
-import { TruncatableTickProps } from '../types';
+import React from 'react';
+
+import { TruncatableTickProps } from '@components/components/BarChart/types';
+import { Popover } from '@components/components/Popover';
 
 export default function TruncatableTick({ formattedValue, limit, ...textProps }: TruncatableTickProps) {
     if (formattedValue === undefined) return null;

datahub-web-react/src/alchemy-components/components/BarChart/constants.ts

@@ -1,5 +1,6 @@
+import { ColorScheme, ColorSchemeParams } from '@components/components/BarChart/types';
+
 import { colors } from '@src/alchemy-components/theme';
-import { ColorScheme, ColorSchemeParams } from './types';
 
 export const VIOLET_COLOR_SCHEME_PRARAMS: ColorSchemeParams = {
     mainColor: colors.violet[500],

datahub-web-react/src/alchemy-components/components/BarChart/defaults.ts

@@ -1,9 +1,11 @@
-import { colors } from '@src/alchemy-components/theme';
 import { TickLabelProps } from '@visx/axis';
 import dayjs from 'dayjs';
-import { DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL } from './constants';
-import { BarChartProps, Datum } from './types';
-import { abbreviateNumber } from '../dataviz/utils';
+
+import { DEFAULT_LENGTH_OF_LEFT_AXIS_LABEL } from '@components/components/BarChart/constants';
+import { BarChartProps, Datum } from '@components/components/BarChart/types';
+import { abbreviateNumber } from '@components/components/dataviz/utils';
+
+import { colors } from '@src/alchemy-components/theme';
 
 const commonTickLabelProps: TickLabelProps<Datum> = {
     fontSize: 10,

datahub-web-react/src/alchemy-components/components/BarChart/hooks/useMaxDataValue.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { BaseDatum, YAccessor } from '../types';
+
+import { BaseDatum, YAccessor } from '@components/components/BarChart/types';
 
 export default function useMaxDataValue(data: BaseDatum[], yAccessor: YAccessor): number {
     return useMemo(() => Math.max(...data.map(yAccessor)) ?? 0, [data, yAccessor]);

datahub-web-react/src/alchemy-components/components/BarChart/hooks/useMinDataValue.ts

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
-import { BaseDatum, YAccessor } from '../types';
+
+import { BaseDatum, YAccessor } from '@components/components/BarChart/types';
 
 export default function useMinDataValue(data: BaseDatum[], yAccessor: YAccessor): number {
     return useMemo(() => Math.min(...data.map(yAccessor)) ?? 0, [data, yAccessor]);

datahub-web-react/src/alchemy-components/components/BarChart/hooks/usePrepareAccessors.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { BaseDatum, XAccessor, YAccessor } from '../types';
+
+import { BaseDatum, XAccessor, YAccessor } from '@components/components/BarChart/types';
 
 export const DEFAULT_MIN_VALUE = 0.1;
 

datahub-web-react/src/alchemy-components/components/BarChart/hooks/usePrepareScales.ts

@@ -1,5 +1,6 @@
 import { useCallback, useMemo } from 'react';
-import { BaseDatum, Scale, XAccessor, YAccessor } from '../types';
+
+import { BaseDatum, Scale, XAccessor, YAccessor } from '@components/components/BarChart/types';
 
 export const DEFAULT_MAX_DOMAIN_VALUE = 10;
 

datahub-web-react/src/alchemy-components/components/BarChart/utils.ts

@@ -1,5 +1,6 @@
 import dayjs from 'dayjs';
-import { COLOR_SCHEMES } from './constants';
+
+import { COLOR_SCHEMES } from '@components/components/BarChart/constants';
 
 export function generateMockData(length = 30, maxValue = 50_000, minValue = 0) {
     return Array(length)

datahub-web-react/src/alchemy-components/components/Button/Button.stories.tsx

@@ -1,13 +1,12 @@
+import { AVAILABLE_ICONS } from '@components';
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { GridList } from '@components/.docs/mdx-components';
 import { ButtonVariantValues } from '@components/components/Button/types';
 import { MATERIAL_UI_ICONS, PHOSPHOR_ICONS } from '@components/components/Icon/constants';
 import { SizeValues } from '@components/theme/config';
-import React from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-import { BADGE } from '@geometricpanda/storybook-addon-badges';
-
-import { GridList } from '@components/.docs/mdx-components';
-import { AVAILABLE_ICONS } from '@components';
 
 import { Button, buttonDefaults } from '.';
 

datahub-web-react/src/alchemy-components/components/Button/Button.tsx

@@ -1,11 +1,9 @@
+import { LoadingOutlined } from '@ant-design/icons';
+import { Icon } from '@components';
 import React from 'react';
 
-import { LoadingOutlined } from '@ant-design/icons';
-
-import { Icon } from '@components';
-
-import { ButtonBase } from './components';
-import { ButtonProps, ButtonPropsDefaults } from './types';
+import { ButtonBase } from '@components/components/Button/components';
+import { ButtonProps, ButtonPropsDefaults } from '@components/components/Button/types';
 
 export const buttonDefaults: ButtonPropsDefaults = {
     variant: 'filled',

datahub-web-react/src/alchemy-components/components/Button/components.ts

@@ -1,8 +1,8 @@
 import styled from 'styled-components';
 
+import { ButtonStyleProps } from '@components/components/Button/types';
+import { getButtonStyle } from '@components/components/Button/utils';
 import { spacing } from '@components/theme';
-import { ButtonStyleProps } from './types';
-import { getButtonStyle } from './utils';
 
 export const ButtonBase = styled.button(
     // Dynamic styles

datahub-web-react/src/alchemy-components/components/Button/types.ts

@@ -1,7 +1,7 @@
-import { IconProps } from '@components/components/Icon/types';
 import { ButtonHTMLAttributes } from 'react';
 
-import type { SizeOptions, ColorOptions } from '@components/theme/config';
+import { IconProps } from '@components/components/Icon/types';
+import type { ColorOptions, SizeOptions } from '@components/theme/config';
 
 export enum ButtonVariantValues {
     filled = 'filled',

datahub-web-react/src/alchemy-components/components/Button/utils.ts

@@ -1,12 +1,12 @@
 /*
  * Button Style Utilities
  */
+import { CSSObject } from 'styled-components';
 
-import { typography, colors, shadows, radius, spacing } from '@components/theme';
+import { ButtonStyleProps, ButtonVariant } from '@components/components/Button/types';
+import { colors, radius, shadows, spacing, typography } from '@components/theme';
 import { ColorOptions, SizeOptions } from '@components/theme/config';
 import { getColor, getFontSize } from '@components/theme/utils';
-import { CSSObject } from 'styled-components';
-import { ButtonStyleProps, ButtonVariant } from './types';
 
 interface ColorStyles {
     bgColor: string;

datahub-web-react/src/alchemy-components/components/CalendarChart/CalendarChart.stories.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { Meta, StoryObj } from '@storybook/react';
-import { CalendarChart } from './CalendarChart';
-import { getMockedProps } from './utils';
+import React from 'react';
+
+import { CalendarChart } from '@components/components/CalendarChart/CalendarChart';
+import { getMockedProps } from '@components/components/CalendarChart/utils';
 
 const meta = {
     title: 'Charts / CalendarChart',

datahub-web-react/src/alchemy-components/components/CalendarChart/CalendarChart.tsx

@@ -1,14 +1,16 @@
-import { colors } from '@src/alchemy-components/theme';
 import { ParentSize } from '@visx/responsive';
 import React, { useMemo } from 'react';
-import { ChartWrapper } from './components';
-import { AxisBottomMonths } from './private/components/AxisBottomMonths';
-import { AxisLeftWeekdays } from './private/components/AxisLeftWeekdays';
-import { Calendar } from './private/components/Calendar';
-import { CalendarProvider } from './private/context';
-import { CalendarChartProps } from './types';
-import { prepareCalendarData } from './utils';
-import { CalendarContainer } from './private/components/CalendarContainer';
+
+import { ChartWrapper } from '@components/components/CalendarChart/components';
+import { AxisBottomMonths } from '@components/components/CalendarChart/private/components/AxisBottomMonths';
+import { AxisLeftWeekdays } from '@components/components/CalendarChart/private/components/AxisLeftWeekdays';
+import { Calendar } from '@components/components/CalendarChart/private/components/Calendar';
+import { CalendarContainer } from '@components/components/CalendarChart/private/components/CalendarContainer';
+import { CalendarProvider } from '@components/components/CalendarChart/private/context';
+import { CalendarChartProps } from '@components/components/CalendarChart/types';
+import { prepareCalendarData } from '@components/components/CalendarChart/utils';
+
+import { colors } from '@src/alchemy-components/theme';
 
 const commonLabelProps = {
     fill: colors.gray[1700],

datahub-web-react/src/alchemy-components/components/CalendarChart/_tests_/getColorAccessors.test.ts

@@ -1,5 +1,5 @@
-import { CalendarData } from '../types';
-import { getColorAccessor } from '../utils';
+import { CalendarData } from '@components/components/CalendarChart/types';
+import { getColorAccessor } from '@components/components/CalendarChart/utils';
 
 type Datum = {
     value1: number;

datahub-web-react/src/alchemy-components/components/CalendarChart/_tests_/prepareCalendarDate.test.ts

@@ -1,5 +1,5 @@
-import { CalendarData } from '../types';
-import { prepareCalendarData } from '../utils';
+import { CalendarData } from '@components/components/CalendarChart/types';
+import { prepareCalendarData } from '@components/components/CalendarChart/utils';
 
 const sampleData: CalendarData<number>[] = [
     { day: '2024-12-02', value: 1 },

datahub-web-react/src/alchemy-components/components/CalendarChart/private/components/AxisBottomMonths.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { DAYS_IN_WEEK } from '../constants';
-import { useCalendarState } from '../context';
-import { TickLabel } from './TickLabel';
-import { AxisBottomMonthsProps } from '../../types';
+
+import { TickLabel } from '@components/components/CalendarChart/private/components/TickLabel';
+import { DAYS_IN_WEEK } from '@components/components/CalendarChart/private/constants';
+import { useCalendarState } from '@components/components/CalendarChart/private/context';
+import { AxisBottomMonthsProps } from '@components/components/CalendarChart/types';
 
 export function AxisBottomMonths<ValueType>({ labelProps }: AxisBottomMonthsProps) {
     const { squareSize, squareGap, margin, data } = useCalendarState<ValueType>();

datahub-web-react/src/alchemy-components/components/CalendarChart/private/components/AxisLeftWeekdays.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
-import { DAYS_IN_WEEK } from '../constants';
-import { AxisLeftWeekdaysProps } from '../../types';
-import { useCalendarState } from '../context';
-import { TickLabel } from './TickLabel';
+
+import { TickLabel } from '@components/components/CalendarChart/private/components/TickLabel';
+import { DAYS_IN_WEEK } from '@components/components/CalendarChart/private/constants';
+import { useCalendarState } from '@components/components/CalendarChart/private/context';
+import { AxisLeftWeekdaysProps } from '@components/components/CalendarChart/types';
 
 const WEEKDAYS = ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'];
 

datahub-web-react/src/alchemy-components/components/CalendarChart/private/components/Calendar.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { CalendarProps } from '../../types';
-import { Month } from './Month';
+
+import { Month } from '@components/components/CalendarChart/private/components/Month';
+import { CalendarProps } from '@components/components/CalendarChart/types';
 
 export function Calendar<ValueType>({ data }: CalendarProps<ValueType>) {
     return (

datahub-web-react/src/alchemy-components/components/CalendarChart/private/components/CalendarContainer.tsx

@@ -1,8 +1,9 @@
 import React, { useMemo } from 'react';
-import { useCalendarState } from '../context';
-import { DAYS_IN_WEEK } from '../constants';
-import { CalendarContainerProps } from '../../types';
-import { CalendarInnerWrapper, CalendarWrapper } from '../../components';
+
+import { CalendarInnerWrapper, CalendarWrapper } from '@components/components/CalendarChart/components';
+import { DAYS_IN_WEEK } from '@components/components/CalendarChart/private/constants';
+import { useCalendarState } from '@components/components/CalendarChart/private/context';
+import { CalendarContainerProps } from '@components/components/CalendarChart/types';
 
 export function CalendarContainer<ValueType>({ children }: CalendarContainerProps) {
     const { squareSize, squareGap, margin, parentHeight, countOfWeeks, countOfMonths } = useCalendarState<ValueType>();

datahub-web-react/src/alchemy-components/components/CalendarChart/private/components/Day.tsx

@@ -1,8 +1,10 @@
-import { Popover } from '@src/alchemy-components/components/Popover';
 import React, { useMemo } from 'react';
-import { DayProps } from '../../types';
-import { useCalendarState } from '../context';
-import { StyledBar } from '../../components';
+
+import { StyledBar } from '@components/components/CalendarChart/components';
+import { useCalendarState } from '@components/components/CalendarChart/private/context';
+import { DayProps } from '@components/components/CalendarChart/types';
+
+import { Popover } from '@src/alchemy-components/components/Popover';
 
 export function Day<ValueType>({ day, weekOffset, dayIndex }: DayProps<ValueType>) {
     const { squareSize, squareGap, margin, colorAccessor, showPopover, popoverRenderer, selectedDay, onDayClick } =

datahub-web-react/src/alchemy-components/components/CalendarChart/private/components/Month.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import { MonthProps } from '../../types';
-import { useCalendarState } from '../context';
-import { Week } from './Week';
+
+import { Week } from '@components/components/CalendarChart/private/components/Week';
+import { useCalendarState } from '@components/components/CalendarChart/private/context';
+import { MonthProps } from '@components/components/CalendarChart/types';
 
 export function Month<ValueType>({ month, monthIndex }: MonthProps<ValueType>) {
     const { squareGap, data } = useCalendarState();

datahub-web-react/src/alchemy-components/components/CalendarChart/private/components/Week.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo } from 'react';
-import { WeekProps } from '../../types';
-import { useCalendarState } from '../context';
-import { Day } from './Day';
+
+import { Day } from '@components/components/CalendarChart/private/components/Day';
+import { useCalendarState } from '@components/components/CalendarChart/private/context';
+import { WeekProps } from '@components/components/CalendarChart/types';
 
 export function Week<ValueType>({ week, weekNumber, monthOffset }: WeekProps<ValueType>) {
     const { squareSize, squareGap, margin } = useCalendarState<ValueType>();

datahub-web-react/src/alchemy-components/components/CalendarChart/private/context.tsx

@@ -1,7 +1,8 @@
 import { Margin } from '@visx/xychart';
-import React, { createContext, PropsWithChildren, useContext, useMemo } from 'react';
-import { DayData, MonthData } from '../types';
-import { DAYS_IN_WEEK, MIN_GAP_SIZE, MIN_SQUARE_SIZE } from './constants';
+import React, { PropsWithChildren, createContext, useContext, useMemo } from 'react';
+
+import { DAYS_IN_WEEK, MIN_GAP_SIZE, MIN_SQUARE_SIZE } from '@components/components/CalendarChart/private/constants';
+import { DayData, MonthData } from '@components/components/CalendarChart/types';
 
 export type CalendarContextState<ValueType = any> = {
     data: MonthData<ValueType>[];

datahub-web-react/src/alchemy-components/components/CalendarChart/utils.ts

@@ -1,12 +1,20 @@
 import { scaleLinear } from '@visx/scale';
 import * as d3interpolate from '@visx/vendor/d3-interpolate';
 import dayjs from 'dayjs';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 import isoWeek from 'dayjs/plugin/isoWeek';
 import utc from 'dayjs/plugin/utc';
-import advancedFormat from 'dayjs/plugin/advancedFormat';
-import { CalendarChartProps, CalendarData, ColorAccessor, DayData, MonthData, WeekData } from './types';
-import { DAYS_IN_WEEK, MIN_DAYS_IN_WEEK } from './private/constants';
-import { CALENDAR_DATE_FORMAT } from './constants';
+
+import { CALENDAR_DATE_FORMAT } from '@components/components/CalendarChart/constants';
+import { DAYS_IN_WEEK, MIN_DAYS_IN_WEEK } from '@components/components/CalendarChart/private/constants';
+import {
+    CalendarChartProps,
+    CalendarData,
+    ColorAccessor,
+    DayData,
+    MonthData,
+    WeekData,
+} from '@components/components/CalendarChart/types';
 
 dayjs.extend(isoWeek);
 dayjs.extend(utc);

datahub-web-react/src/alchemy-components/components/Card/Card.stories.tsx

@@ -1,10 +1,13 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
-import { GridList } from '@src/alchemy-components/.docs/mdx-components';
-import { colors } from '@src/alchemy-components/theme';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+
+import { Icon } from '@components/components/Icon';
+
+import { GridList } from '@src/alchemy-components/.docs/mdx-components';
+import { colors } from '@src/alchemy-components/theme';
+
 import { Card, cardDefaults } from '.';
-import { Icon } from '../Icon';
 
 // Auto Docs
 const meta = {

datahub-web-react/src/alchemy-components/components/Card/Card.tsx

@@ -1,7 +1,15 @@
 import React from 'react';
-import { CardProps } from './types';
-import { CardContainer, Header, SubTitle, SubTitleContainer, Title, TitleContainer } from './components';
-import { Pill } from '../Pills';
+
+import {
+    CardContainer,
+    Header,
+    SubTitle,
+    SubTitleContainer,
+    Title,
+    TitleContainer,
+} from '@components/components/Card/components';
+import { CardProps } from '@components/components/Card/types';
+import { Pill } from '@components/components/Pills';
 
 export const cardDefaults: CardProps = {
     title: 'Title',

datahub-web-react/src/alchemy-components/components/Card/components.ts

@@ -1,6 +1,7 @@
+import styled from 'styled-components';
+
 import { colors, radius, spacing, typography } from '@src/alchemy-components/theme';
 import { IconAlignmentOptions } from '@src/alchemy-components/theme/config';
-import styled from 'styled-components';
 
 export const CardContainer = styled.div<{ hasButton?: boolean; width?: string; maxWidth?: string; height?: string }>(
     ({ hasButton, width, maxWidth, height }) => ({

datahub-web-react/src/alchemy-components/components/Checkbox/Checkbox.stories.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
 import { GridList } from '@components/.docs/mdx-components';
-import { Checkbox, checkboxDefaults, CheckboxGroup } from './Checkbox';
-import { CheckboxProps } from './types';
-import { Heading } from '../Heading';
+import { Checkbox, CheckboxGroup, checkboxDefaults } from '@components/components/Checkbox/Checkbox';
+import { CheckboxProps } from '@components/components/Checkbox/types';
+import { Heading } from '@components/components/Heading';
 
 const MOCK_CHECKBOXES: CheckboxProps[] = [
     {

datahub-web-react/src/alchemy-components/components/Checkbox/Checkbox.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { CheckboxProps, CheckboxGroupProps } from './types';
+
 import {
     CheckboxBase,
     CheckboxContainer,
@@ -9,7 +9,8 @@ import {
     Label,
     Required,
     StyledCheckbox,
-} from './components';
+} from '@components/components/Checkbox/components';
+import { CheckboxGroupProps, CheckboxProps } from '@components/components/Checkbox/types';
 
 export const checkboxDefaults: CheckboxProps = {
     error: '',

datahub-web-react/src/alchemy-components/components/Checkbox/components.ts

@@ -1,8 +1,14 @@
 import styled from 'styled-components';
-import { borders, colors, spacing, transform, zIndices, radius } from '@components/theme';
+
+import {
+    getCheckboxColor,
+    getCheckboxHoverBackgroundColor,
+    getCheckboxSize,
+} from '@components/components/Checkbox/utils';
+import { formLabelTextStyles } from '@components/components/commonStyles';
+import { borders, colors, radius, spacing, transform, zIndices } from '@components/theme';
+
 import { SizeOptions } from '@src/alchemy-components/theme/config';
-import { getCheckboxColor, getCheckboxHoverBackgroundColor, getCheckboxSize } from './utils';
-import { formLabelTextStyles } from '../commonStyles';
 
 export const CheckboxContainer = styled.div({
     display: 'flex',

datahub-web-react/src/alchemy-components/components/Checkbox/types.ts

@@ -1,4 +1,5 @@
 import { InputHTMLAttributes } from 'react';
+
 import { SizeOptions } from '@src/alchemy-components/theme/config';
 
 export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {

datahub-web-react/src/alchemy-components/components/Checkbox/utils.ts

@@ -1,4 +1,5 @@
 import theme, { colors } from '@components/theme';
+
 import { SizeOptions } from '@src/alchemy-components/theme/config';
 
 const checkboxBackgroundDefault = {

datahub-web-react/src/alchemy-components/components/ColorPicker/ColorPicker.tsx

@@ -1,7 +1,7 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import styled from 'styled-components';
-import { CirclePicker, ColorResult } from 'react-color';
 import { Input, colors } from '@components';
+import React, { useCallback, useEffect, useState } from 'react';
+import { CirclePicker, ColorResult } from 'react-color';
+import styled from 'styled-components';
 
 // Constants
 const DEFAULT_COLORS = [

datahub-web-react/src/alchemy-components/components/DatePicker/DatePicker.stories.tsx

@@ -1,8 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import moment from 'moment';
 import React, { useState } from 'react';
-import { DatePicker, datePickerDefault } from './DatePicker';
-import { DatePickerValue } from './types';
+
+import { DatePicker, datePickerDefault } from '@components/components/DatePicker/DatePicker';
+import { DatePickerValue } from '@components/components/DatePicker/types';
 
 const meta = {
     title: 'Forms / DatePicker',

datahub-web-react/src/alchemy-components/components/DatePicker/DatePicker.tsx

@@ -1,8 +1,9 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { StyledAntdDatePicker } from './components';
-import useVariantProps from './hooks/useVariantProps';
-import { DatePickerVariant } from './constants';
-import { DatePickerProps, DatePickerValue } from './types';
+
+import { StyledAntdDatePicker } from '@components/components/DatePicker/components';
+import { DatePickerVariant } from '@components/components/DatePicker/constants';
+import useVariantProps from '@components/components/DatePicker/hooks/useVariantProps';
+import { DatePickerProps, DatePickerValue } from '@components/components/DatePicker/types';
 
 export const datePickerDefault: DatePickerProps = {
     variant: DatePickerVariant.Default,

datahub-web-react/src/alchemy-components/components/DatePicker/components.tsx

@@ -1,7 +1,8 @@
-import { colors } from '@src/alchemy-components/theme';
 import { DatePicker as AntdDatePicker } from 'antd';
 import styled from 'styled-components';
 
+import { colors } from '@src/alchemy-components/theme';
+
 export const StyledAntdDatePicker = styled(AntdDatePicker)<{ $noDefaultPaddings?: boolean }>`
     &.ant-picker {
         ${(props) => props.$noDefaultPaddings && 'padding: 0;'}

datahub-web-react/src/alchemy-components/components/DatePicker/hooks/useVariantProps.ts

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import { DatePickerVariant } from '../constants';
-import { VariantProps } from '../types';
-import { CommonVariantProps, DateSwitcherVariantProps } from '../variants';
+
+import { DatePickerVariant } from '@components/components/DatePicker/constants';
+import { VariantProps } from '@components/components/DatePicker/types';
+import { CommonVariantProps, DateSwitcherVariantProps } from '@components/components/DatePicker/variants';
 
 export default function useVariantProps(variant: DatePickerVariant | undefined): VariantProps {
     return useMemo(() => {

datahub-web-react/src/alchemy-components/components/DatePicker/types.ts

@@ -1,6 +1,7 @@
 import { DatePicker as AntdDatePicker } from 'antd';
 import { Moment } from 'moment';
-import { DatePickerVariant } from './constants';
+
+import { DatePickerVariant } from '@components/components/DatePicker/constants';
 
 export type DatePickerProps = {
     value?: DatePickerValue;

datahub-web-react/src/alchemy-components/components/DatePicker/variants/common/props.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { StyledCalendarWrapper } from '../../components';
-import { VariantProps } from '../../types';
+
+import { StyledCalendarWrapper } from '@components/components/DatePicker/components';
+import { VariantProps } from '@components/components/DatePicker/types';
 
 export const CommonVariantProps: VariantProps = {
     panelRender: (panel) => <StyledCalendarWrapper>{panel}</StyledCalendarWrapper>,

datahub-web-react/src/alchemy-components/components/DatePicker/variants/dateSwitcher/components.tsx

@@ -2,9 +2,10 @@ import { colors } from '@components';
 import { CaretLeft, CaretRight } from 'phosphor-react';
 import React, { useCallback, useMemo } from 'react';
 import styled from 'styled-components';
-import { Text } from '../../../Text/Text';
-import { SwitcherDirection } from './types';
-import { ExtendedInputRenderProps } from '../../types';
+
+import { ExtendedInputRenderProps } from '@components/components/DatePicker/types';
+import { SwitcherDirection } from '@components/components/DatePicker/variants/dateSwitcher/types';
+import { Text } from '@components/components/Text/Text';
 
 const StyledContainer = styled.div<{ $opened?: boolean; $disabled?: boolean }>`
     border: 1px solid ${(props) => (props.$opened || props.$disabled ? colors.gray[1800] : colors.gray[100])};

datahub-web-react/src/alchemy-components/components/DatePicker/variants/dateSwitcher/props.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { VariantProps } from '../../types';
-import { CommonVariantProps } from '../common/props';
-import { DateSwitcherInput } from './components';
+
+import { VariantProps } from '@components/components/DatePicker/types';
+import { CommonVariantProps } from '@components/components/DatePicker/variants/common/props';
+import { DateSwitcherInput } from '@components/components/DatePicker/variants/dateSwitcher/components';
 
 export const DateSwitcherVariantProps: VariantProps = {
     ...CommonVariantProps,

datahub-web-react/src/alchemy-components/components/DatePicker/variants/index.ts

@@ -1,4 +1,4 @@
-import { CommonVariantProps } from './common/props';
-import { DateSwitcherVariantProps } from './dateSwitcher/props';
+import { CommonVariantProps } from '@components/components/DatePicker/variants/common/props';
+import { DateSwitcherVariantProps } from '@components/components/DatePicker/variants/dateSwitcher/props';
 
 export { CommonVariantProps, DateSwitcherVariantProps };

datahub-web-react/src/alchemy-components/components/Drawer/Drawer.stories.tsx

@@ -1,10 +1,11 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
-import { Button } from '../Button';
-import { Drawer } from './Drawer';
-import { DrawerProps } from './types';
-import { drawerDefault } from './defaults';
+
+import { Button } from '@components/components/Button';
+import { Drawer } from '@components/components/Drawer/Drawer';
+import { drawerDefault } from '@components/components/Drawer/defaults';
+import { DrawerProps } from '@components/components/Drawer/types';
 
 // Auto Docs
 const meta = {

datahub-web-react/src/alchemy-components/components/Drawer/Drawer.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import { Button } from '../Button';
-import { Text } from '../Text';
-import { StyledDrawer, TitleContainer, TitleLeftContainer } from './components';
-import { maskTransparentStyle } from './constants';
-import { DrawerProps } from './types';
-import { drawerDefault } from './defaults';
+
+import { Button } from '@components/components/Button';
+import { StyledDrawer, TitleContainer, TitleLeftContainer } from '@components/components/Drawer/components';
+import { maskTransparentStyle } from '@components/components/Drawer/constants';
+import { drawerDefault } from '@components/components/Drawer/defaults';
+import { DrawerProps } from '@components/components/Drawer/types';
+import { Text } from '@components/components/Text';
 
 export const Drawer = ({
     title,

datahub-web-react/src/alchemy-components/components/Drawer/defaults.ts

@@ -1,4 +1,4 @@
-import { DrawerProps } from './types';
+import { DrawerProps } from '@components/components/Drawer/types';
 
 export const drawerDefault: Omit<DrawerProps, 'title'> = {
     width: 600,

datahub-web-react/src/alchemy-components/components/Dropdown/Dropdown.stories.tsx

@@ -1,7 +1,8 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
-import Dropdown from './Dropdown';
+
+import Dropdown from '@components/components/Dropdown/Dropdown';
 
 // Auto Docs
 const meta = {

datahub-web-react/src/alchemy-components/components/Dropdown/Dropdown.tsx

@@ -1,7 +1,8 @@
 import { Dropdown as AntdDropdown } from 'antd';
 import React, { useMemo } from 'react';
-import { useOverlayClassStackContext } from '../Utils/OverlayClassContext/OverlayClassContext';
-import { DropdownProps } from './types';
+
+import { DropdownProps } from '@components/components/Dropdown/types';
+import { useOverlayClassStackContext } from '@components/components/Utils/OverlayClassContext/OverlayClassContext';
 
 export default function Dropdown({ children, overlayClassName, ...props }: React.PropsWithChildren<DropdownProps>) {
     // Get all overlay classes from parents

datahub-web-react/src/alchemy-components/components/Editor/Editor.stories.tsx

@@ -1,11 +1,13 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BoldExtension, ItalicExtension } from 'remirror/extensions';
-import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';
-import React from 'react';
-import UserContextProvider from '@src/app/context/UserContextProvider';
 import { MockedProvider } from '@apollo/client/testing';
-import { Editor } from './Editor';
-import { EditorTheme } from './EditorTheme';
+import { Remirror, ThemeProvider, useRemirror } from '@remirror/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { BoldExtension, ItalicExtension } from 'remirror/extensions';
+
+import { Editor } from '@components/components/Editor/Editor';
+import { EditorTheme } from '@components/components/Editor/EditorTheme';
+
+import UserContextProvider from '@src/app/context/UserContextProvider';
 
 const meta = {
     title: 'Components / Editor',

datahub-web-react/src/alchemy-components/components/Editor/Editor.tsx

@@ -1,5 +1,7 @@
-import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { EditorComponent, Remirror, TableComponents, ThemeProvider, useRemirror } from '@remirror/react';
 import DOMPurify from 'dompurify';
+import React, { forwardRef, useEffect, useImperativeHandle } from 'react';
+import { useMount } from 'react-use';
 import {
     BlockquoteExtension,
     BoldExtension,
@@ -21,18 +23,17 @@ import {
     TableExtension,
     UnderlineExtension,
 } from 'remirror/extensions';
-import { EditorComponent, Remirror, useRemirror, ThemeProvider, TableComponents } from '@remirror/react';
-import { useMount } from 'react-use';
-import { EditorContainer, EditorTheme } from './EditorTheme';
-import { htmlToMarkdown } from './extensions/htmlToMarkdown';
-import { markdownToHtml } from './extensions/markdownToHtml';
-import { CodeBlockToolbar } from './toolbar/CodeBlockToolbar';
-import { FloatingToolbar } from './toolbar/FloatingToolbar';
-import { Toolbar } from './toolbar/Toolbar';
-import { OnChangeMarkdown } from './OnChangeMarkdown';
-import { TableCellMenu } from './toolbar/TableCellMenu';
-import { DataHubMentionsExtension } from './extensions/mentions/DataHubMentionsExtension';
-import { MentionsComponent } from './extensions/mentions/MentionsComponent';
+
+import { EditorContainer, EditorTheme } from '@components/components/Editor/EditorTheme';
+import { OnChangeMarkdown } from '@components/components/Editor/OnChangeMarkdown';
+import { htmlToMarkdown } from '@components/components/Editor/extensions/htmlToMarkdown';
+import { markdownToHtml } from '@components/components/Editor/extensions/markdownToHtml';
+import { DataHubMentionsExtension } from '@components/components/Editor/extensions/mentions/DataHubMentionsExtension';
+import { MentionsComponent } from '@components/components/Editor/extensions/mentions/MentionsComponent';
+import { CodeBlockToolbar } from '@components/components/Editor/toolbar/CodeBlockToolbar';
+import { FloatingToolbar } from '@components/components/Editor/toolbar/FloatingToolbar';
+import { TableCellMenu } from '@components/components/Editor/toolbar/TableCellMenu';
+import { Toolbar } from '@components/components/Editor/toolbar/Toolbar';
 
 type EditorProps = {
     readOnly?: boolean;

datahub-web-react/src/alchemy-components/components/Editor/EditorTheme.tsx

@@ -1,7 +1,3 @@
-import { defaultRemirrorTheme } from '@remirror/theme';
-import type { RemirrorThemeType } from '@remirror/theme';
-import styled from 'styled-components';
-
 import {
     extensionBlockquoteStyledCss,
     extensionCalloutStyledCss,
@@ -15,6 +11,10 @@ import {
     extensionPositionerStyledCss,
     extensionTablesStyledCss,
 } from '@remirror/styles/styled-components';
+import { defaultRemirrorTheme } from '@remirror/theme';
+import type { RemirrorThemeType } from '@remirror/theme';
+import styled from 'styled-components';
+
 import { ANTD_GRAY } from '@src/app/entityV2/shared/constants';
 
 export const EditorTheme: RemirrorThemeType = {

datahub-web-react/src/alchemy-components/components/Editor/OnChangeMarkdown.tsx

@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
-import { useExtensionEvent, useHelpers } from '@remirror/react';
 import { DocChangedExtension } from '@remirror/core';
+import { useExtensionEvent, useHelpers } from '@remirror/react';
+import { useCallback } from 'react';
 
 export interface OnChangeMarkdownProps {
     onChange: (md: string) => void;

datahub-web-react/src/alchemy-components/components/Editor/extensions/htmlToMarkdown.tsx

@@ -1,7 +1,8 @@
+import { ErrorConstant, defaultImport, invariant, isElementDomNode } from '@remirror/core';
 import _TurndownService from 'turndown';
 import { gfm } from 'turndown-plugin-gfm';
-import { defaultImport, ErrorConstant, invariant, isElementDomNode } from '@remirror/core';
-import { DATAHUB_MENTION_ATTRS } from './mentions/DataHubMentionsExtension';
+
+import { DATAHUB_MENTION_ATTRS } from '@components/components/Editor/extensions/mentions/DataHubMentionsExtension';
 
 const TurndownService = defaultImport(_TurndownService);
 

datahub-web-react/src/alchemy-components/components/Editor/extensions/markdownToHtml.tsx

@@ -1,5 +1,6 @@
 import { marked } from 'marked';
-import { DATAHUB_MENTION_ATTRS } from './mentions/DataHubMentionsExtension';
+
+import { DATAHUB_MENTION_ATTRS } from '@components/components/Editor/extensions/mentions/DataHubMentionsExtension';
 
 marked.use({
     renderer: {

datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/DataHubMentionsExtension.tsx

@@ -1,19 +1,17 @@
 /* eslint-disable class-methods-use-this */
-import React, { ComponentType } from 'react';
-import type { Plugin } from 'prosemirror-state';
 import {
     ApplySchemaAttributes,
     CommandFunction,
-    extension,
     ExtensionTag,
     FromToProps,
     Handler,
-    isElementDomNode,
     NodeExtension,
     NodeExtensionSpec,
     NodeSpecOverride,
-    omitExtraAttributes,
     ProsemirrorAttributes,
+    extension,
+    isElementDomNode,
+    omitExtraAttributes,
 } from '@remirror/core';
 import { NodeViewComponentProps } from '@remirror/react';
 import autocomplete, {
@@ -21,7 +19,10 @@ import autocomplete, {
     AutocompleteAction,
     pluginKey as acPluginKey,
 } from 'prosemirror-autocomplete';
-import { MentionsNodeView } from './MentionsNodeView';
+import type { Plugin } from 'prosemirror-state';
+import React, { ComponentType } from 'react';
+
+import { MentionsNodeView } from '@components/components/Editor/extensions/mentions/MentionsNodeView';
 
 export const DATAHUB_MENTION_ATTRS = {
     urn: 'data-datahub-mention-urn',

datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsComponent.tsx

@@ -1,14 +1,16 @@
-import React, { useEffect, useState } from 'react';
-import { useDebounce } from 'react-use';
+import { LoadingOutlined } from '@ant-design/icons';
 import { FloatingWrapper } from '@remirror/react';
 import { Empty, Spin } from 'antd';
-import styled from 'styled-components';
-import { LoadingOutlined } from '@ant-design/icons';
+import React, { useEffect, useState } from 'react';
+import { useDebounce } from 'react-use';
 import { Positioner, selectionPositioner } from 'remirror/extensions';
+import styled from 'styled-components';
+
+import { MentionsDropdown } from '@components/components/Editor/extensions/mentions/MentionsDropdown';
+import { useDataHubMentions } from '@components/components/Editor/extensions/mentions/useDataHubMentions';
+
 import { useUserContext } from '@src/app/context/useUserContext';
 import { useGetAutoCompleteMultipleResultsLazyQuery } from '@src/graphql/search.generated';
-import { MentionsDropdown } from './MentionsDropdown';
-import { useDataHubMentions } from './useDataHubMentions';
 
 const Container = styled.div`
     position: relative;

datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsDropdown.tsx

@@ -1,13 +1,15 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { Typography } from 'antd';
-import styled from 'styled-components';
-import { useDebounce } from 'react-use';
 import { useCommands } from '@remirror/react';
-import { useEntityRegistry } from '@src/app/useEntityRegistry';
+import { Typography } from 'antd';
+import React, { useCallback, useMemo, useState } from 'react';
+import { useDebounce } from 'react-use';
+import styled from 'styled-components';
+
+import { useDataHubMentions } from '@components/components/Editor/extensions/mentions/useDataHubMentions';
+
 import { ANTD_GRAY } from '@src/app/entityV2/shared/constants';
-import { AutoCompleteResultForEntity, Entity, EntityType } from '@src/types.generated';
 import AutoCompleteItem from '@src/app/searchV2/autoComplete/AutoCompleteItem';
-import { useDataHubMentions } from './useDataHubMentions';
+import { useEntityRegistry } from '@src/app/useEntityRegistry';
+import { AutoCompleteResultForEntity, Entity, EntityType } from '@src/types.generated';
 
 const HeaderItem = styled(Typography.Text)`
     display: block;

datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/MentionsNodeView.tsx

@@ -1,14 +1,14 @@
-import React from 'react';
-import { Typography } from 'antd';
 import { Tooltip } from '@components';
+import { NodeViewComponentProps } from '@remirror/react';
+import { Typography } from 'antd';
+import React from 'react';
 import styled from 'styled-components';
 
-import { NodeViewComponentProps } from '@remirror/react';
+import { IconStyleType } from '@src/app/entityV2/Entity';
 import { ANTD_GRAY } from '@src/app/entityV2/shared/constants';
+import { HoverEntityTooltip } from '@src/app/recommendations/renderer/component/HoverEntityTooltip';
 import { useEntityRegistry } from '@src/app/useEntityRegistry';
 import { useGetEntityMentionNodeQuery } from '@src/graphql/search.generated';
-import { IconStyleType } from '@src/app/entityV2/Entity';
-import { HoverEntityTooltip } from '@src/app/recommendations/renderer/component/HoverEntityTooltip';
 
 const { Text } = Typography;
 

datahub-web-react/src/alchemy-components/components/Editor/extensions/mentions/useDataHubMentions.ts

@@ -1,7 +1,8 @@
-import { useCallback, useEffect, useState } from 'react';
 import { useRemirrorContext } from '@remirror/react';
 import { ActionKind, AutocompleteAction, FromTo } from 'prosemirror-autocomplete';
-import { DataHubMentionsExtension } from './DataHubMentionsExtension';
+import { useCallback, useEffect, useState } from 'react';
+
+import { DataHubMentionsExtension } from '@components/components/Editor/extensions/mentions/DataHubMentionsExtension';
 
 type State = {
     active: boolean;

datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddImageButton.tsx

@@ -1,9 +1,11 @@
-import React, { useState } from 'react';
-import { Form, Input, Modal, Typography } from 'antd';
-import { useCommands } from '@remirror/react';
 import { Image } from '@phosphor-icons/react';
+import { useCommands } from '@remirror/react';
+import { Form, Input, Modal, Typography } from 'antd';
+import React, { useState } from 'react';
+
+import { CommandButton } from '@components/components/Editor/toolbar/CommandButton';
+
 import { colors } from '@src/alchemy-components/theme';
-import { CommandButton } from './CommandButton';
 
 export const AddImageButton = () => {
     const [isModalVisible, setModalVisible] = useState(false);

datahub-web-react/src/alchemy-components/components/Editor/toolbar/AddLinkButton.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { useActive } from '@remirror/react';
 import { LinkSimpleHorizontal } from '@phosphor-icons/react';
-import { colors } from '@src/alchemy-components/theme';
+import { useActive } from '@remirror/react';
+import React, { useState } from 'react';
 
-import { CommandButton } from './CommandButton';
-import { LinkModal } from './LinkModal';
+import { CommandButton } from '@components/components/Editor/toolbar/CommandButton';
+import { LinkModal } from '@components/components/Editor/toolbar/LinkModal';
+
+import { colors } from '@src/alchemy-components/theme';
 
 export const AddLinkButton = () => {
     const [isModalVisible, setModalVisible] = useState(false);