diff --git a/.github/workflows/ci-docs.yaml b/.github/workflows/ci-docs.yaml index a08cd741a..27a18f5db 100644 --- a/.github/workflows/ci-docs.yaml +++ b/.github/workflows/ci-docs.yaml @@ -6,10 +6,12 @@ on: paths: - 'package.json' - 'packages/twenty-docs/**' + - 'packages/twenty-ui/**' pull_request: paths: - 'package.json' - 'packages/twenty-docs/**' + - 'packages/twenty-ui/**' concurrency: group: ${{ github.workflow }}-${{ github.ref }} cancel-in-progress: true diff --git a/.github/workflows/ci-front.yaml b/.github/workflows/ci-front.yaml index 80e21acff..c9205b4f1 100644 --- a/.github/workflows/ci-front.yaml +++ b/.github/workflows/ci-front.yaml @@ -6,10 +6,12 @@ on: paths: - 'package.json' - 'packages/twenty-front/**' + - 'packages/twenty-ui/**' pull_request: paths: - 'package.json' - 'packages/twenty-front/**' + - 'packages/twenty-ui/**' concurrency: group: ${{ github.workflow }}-${{ github.ref }} cancel-in-progress: true diff --git a/nx.json b/nx.json index 44fcf672e..95354af93 100644 --- a/nx.json +++ b/nx.json @@ -21,6 +21,7 @@ }, "storybook:build": { "cache": true, + "dependsOn": ["^build"], "inputs": [ "default", "^default", diff --git a/packages/twenty-docker/twenty-docs/Dockerfile b/packages/twenty-docker/twenty-docs/Dockerfile index 38a115132..9e97d0967 100644 --- a/packages/twenty-docker/twenty-docs/Dockerfile +++ b/packages/twenty-docker/twenty-docs/Dockerfile @@ -10,6 +10,7 @@ COPY ./.yarnrc.yml . COPY ./.yarn/releases /app/.yarn/releases COPY ./packages/twenty-docs/package.json /app/packages/twenty-docs/package.json COPY ./packages/twenty-emails /app/packages/twenty-emails +COPY ./packages/twenty-ui /app/packages/twenty-ui RUN yarn COPY ./packages/twenty-docs /app/packages/twenty-docs diff --git a/packages/twenty-docs/docs/ui-components/display/chip.mdx b/packages/twenty-docs/docs/ui-components/display/chip.mdx index d1edfc418..a6f044122 100644 --- a/packages/twenty-docs/docs/ui-components/display/chip.mdx +++ b/packages/twenty-docs/docs/ui-components/display/chip.mdx @@ -176,7 +176,7 @@ A Chip-like element to display information about an entity. diff --git a/packages/twenty-docs/docs/ui-components/display/icons.mdx b/packages/twenty-docs/docs/ui-components/display/icons.mdx index 1497c70ed..222cf7ab1 100644 --- a/packages/twenty-docs/docs/ui-components/display/icons.mdx +++ b/packages/twenty-docs/docs/ui-components/display/icons.mdx @@ -32,7 +32,7 @@ yarn add @tabler/icons-react You can import each icon as a component. Here's an example: @@ -93,7 +93,7 @@ Displays an address book icon. diff --git a/packages/twenty-docs/docs/ui-components/input/select.mdx b/packages/twenty-docs/docs/ui-components/input/select.mdx index 78b8befd0..ef83cbb81 100644 --- a/packages/twenty-docs/docs/ui-components/input/select.mdx +++ b/packages/twenty-docs/docs/ui-components/input/select.mdx @@ -16,7 +16,7 @@ Allows users to pick a value from a list of predefined options. diff --git a/packages/twenty-docs/src/ui/display/entityChipCode.js b/packages/twenty-docs/src/ui/display/entityChipCode.js index 423e19985..d7f81c178 100644 --- a/packages/twenty-docs/src/ui/display/entityChipCode.js +++ b/packages/twenty-docs/src/ui/display/entityChipCode.js @@ -1,6 +1,7 @@ -import { BrowserRouter as Router } from "react-router-dom"; -import { EntityChip } from "@/ui/display/chip/components/EntityChip"; -import { IconComponent } from "@/ui/display/icon/types/IconComponent"; +import { BrowserRouter as Router } from 'react-router-dom'; +import { IconTwentyStar } from 'twenty-ui'; + +import { EntityChip } from '@/ui/display/chip/components/EntityChip'; export const MyComponent = () => { return ( @@ -12,7 +13,7 @@ export const MyComponent = () => { pictureUrl="" avatarType="rounded" variant="regular" - LeftIcon={IconComponent} + LeftIcon={IconTwentyStar} /> ); diff --git a/packages/twenty-docs/src/ui/display/iconAddressBookCode.js b/packages/twenty-docs/src/ui/display/iconAddressBookCode.js index f1549a88a..89044322e 100644 --- a/packages/twenty-docs/src/ui/display/iconAddressBookCode.js +++ b/packages/twenty-docs/src/ui/display/iconAddressBookCode.js @@ -1,4 +1,4 @@ -import { IconAddressBook } from "@/ui/display/icon/components/IconAddressBook"; +import { IconAddressBook } from 'twenty-ui'; export const MyComponent = () => { return ; diff --git a/packages/twenty-docs/src/ui/input/components/selectCode.js b/packages/twenty-docs/src/ui/input/components/selectCode.js index 7713beef7..3832f21b9 100644 --- a/packages/twenty-docs/src/ui/input/components/selectCode.js +++ b/packages/twenty-docs/src/ui/input/components/selectCode.js @@ -1,6 +1,7 @@ -import { RecoilRoot } from "recoil"; -import { Select } from "@/ui/input/components/Select"; -import { IconComponent } from "@/ui/display/icon/types/IconComponent"; +import { RecoilRoot } from 'recoil'; +import { IconTwentyStar } from 'twenty-ui'; + +import { Select } from '@/ui/input/components/Select'; export const MyComponent = () => { const handleSelectChange = (selectedValue) => { @@ -16,8 +17,8 @@ export const MyComponent = () => { label="Select an option" onChange={handleSelectChange} options={[ - { value: "option1", label: "Option A", Icon: IconComponent }, - { value: "option2", label: "Option B", Icon: IconComponent }, + { value: 'option1', label: 'Option A', Icon: IconTwentyStar }, + { value: 'option2', label: 'Option B', Icon: IconTwentyStar }, ]} value="option1" /> diff --git a/packages/twenty-front/.storybook/preview.tsx b/packages/twenty-front/.storybook/preview.tsx index 86745cdf7..d7b1255fc 100644 --- a/packages/twenty-front/.storybook/preview.tsx +++ b/packages/twenty-front/.storybook/preview.tsx @@ -2,9 +2,7 @@ import { ThemeProvider } from '@emotion/react'; import { Preview } from '@storybook/react'; import { initialize, mswDecorator } from 'msw-storybook-addon'; import { useDarkMode } from 'storybook-dark-mode'; - -import { THEME_DARK } from '@/ui/theme/constants/ThemeDark'; -import { THEME_LIGHT } from '@/ui/theme/constants/ThemeLight'; +import { THEME_DARK, THEME_LIGHT } from 'twenty-ui'; import { RootDecorator } from '../src/testing/decorators/RootDecorator'; import { mockedUserJWT } from '../src/testing/mock-data/jwt'; diff --git a/packages/twenty-front/jest.config.ts b/packages/twenty-front/jest.config.ts index 24279df51..22f9353df 100644 --- a/packages/twenty-front/jest.config.ts +++ b/packages/twenty-front/jest.config.ts @@ -1,8 +1,5 @@ -/* eslint-disable @nx/enforce-module-boundaries,import/no-relative-packages */ import { JestConfigWithTsJest, pathsToModuleNameMapper } from 'ts-jest'; -import { compilerOptions as twentyUiCompilerOptions } from '../twenty-ui/tsconfig.json'; - import { compilerOptions } from './tsconfig.json'; const jestConfig: JestConfigWithTsJest = { @@ -17,12 +14,10 @@ const jestConfig: JestConfigWithTsJest = { '^.+\\.(ts|js|tsx|jsx)$': '@swc/jest', }, moduleNameMapper: { - ...pathsToModuleNameMapper(compilerOptions.paths), - // Include internal library aliases, so there is no need to build the library before tests. - ...pathsToModuleNameMapper(twentyUiCompilerOptions.paths), '\\.(jpg|jpeg|png|gif|webp|svg|svg\\?react)$': '/__mocks__/imageMock.js', '\\.css$': '/__mocks__/styleMock.js', + ...pathsToModuleNameMapper(compilerOptions.paths), }, moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'], extensionsToTreatAsEsm: ['.ts', '.tsx'], diff --git a/packages/twenty-front/package.json b/packages/twenty-front/package.json index cede2c86b..a35903560 100644 --- a/packages/twenty-front/package.json +++ b/packages/twenty-front/package.json @@ -5,30 +5,31 @@ "type": "module", "scripts": { "nx": "NX_DEFAULT_PROJECT=twenty-front node ../../node_modules/nx/bin/nx.js", - "start": "vite --host", + "start": "npx vite --host", "start:clean": "yarn start --force", - "build": "tsc && vite build && yarn build:inject-runtime-env", + "build": "yarn tsc && npx vite build && yarn build:inject-runtime-env", "build:inject-runtime-env": "sh ./scripts/inject-runtime-env.sh", - "tsc": "tsc --project tsconfig.app.json --watch", - "tsc:ci": "tsc", - "tsc:spec": "tsc --project tsconfig.spec.json", + "tsc": "npx tsc --project tsconfig.app.json", + "tsc:ci": "yarn tsc --project tsconfig.json", + "tsc:watch": "yarn tsc --watch", + "tsc:spec": "yarn tsc --project tsconfig.spec.json", "preview": "vite preview", - "lint": "eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs", + "lint": "npx eslint . --report-unused-disable-directives --max-warnings 0 --config .eslintrc.cjs", "lint:ci": "yarn lint --config .eslintrc-ci.cjs", "fmt:fix": "prettier --cache --write \"src/**/*.ts\" \"src/**/*.tsx\"", "fmt": "prettier --check \"src/**/*.ts\" \"src/**/*.tsx\"", - "test": "jest", + "test": "npx jest", "test-watch": "jest --watch", "tsup": "tsup", "coverage": "jest --coverage", "storybook:modules:dev": "STORYBOOK_SCOPE=modules yarn storybook:dev", - "storybook:dev": "storybook dev -p 6006 --no-open", + "storybook:dev": "npx storybook dev -p 6006 --no-open", "storybook:pages:dev": "STORYBOOK_SCOPE=pages yarn storybook:dev", "storybook:docs:dev": "STORYBOOK_SCOPE=ui-docs yarn storybook:dev", - "storybook:build": "storybook build", - "storybook:modules:build": "STORYBOOK_SCOPE=modules yarn storybook:build", - "storybook:pages:build": "STORYBOOK_SCOPE=pages yarn storybook:build", - "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs yarn storybook:build", + "storybook:build": "npx storybook build", + "storybook:modules:build": "STORYBOOK_SCOPE=modules npx nx storybook:build", + "storybook:pages:build": "STORYBOOK_SCOPE=pages npx nx storybook:build", + "storybook:docs:build": "STORYBOOK_SCOPE=ui-docs npx nx storybook:build", "storybook:test": "test-storybook", "storybook:test-slow": "test-storybook --maxWorkers=3", "storybook:test-single-worker": "test-storybook --maxWorkers=1", diff --git a/packages/twenty-front/src/index.tsx b/packages/twenty-front/src/index.tsx index 756d1cc59..1f17ce21f 100644 --- a/packages/twenty-front/src/index.tsx +++ b/packages/twenty-front/src/index.tsx @@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'; import { HelmetProvider } from 'react-helmet-async'; import { BrowserRouter } from 'react-router-dom'; import { RecoilRoot } from 'recoil'; +import { IconsProvider } from 'twenty-ui'; import { ApolloProvider } from '@/apollo/components/ApolloProvider'; import { ClientConfigProvider } from '@/client-config/components/ClientConfigProvider'; @@ -15,7 +16,6 @@ import { PromiseRejectionEffect } from '@/error-handler/components/PromiseReject import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider'; import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider'; import { PrefetchDataProvider } from '@/prefetch/components/PrefetchDataProvider'; -import { IconsProvider } from '@/ui/display/icon/components/IconsProvider'; import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager'; import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope'; import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider'; diff --git a/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx b/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx index 8db3376e8..a33822849 100644 --- a/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx +++ b/packages/twenty-front/src/modules/activities/blocks/slashMenu.tsx @@ -1,5 +1,6 @@ import { getDefaultReactSlashMenuItems } from '@blocknote/react'; import { + IconComponent, IconFile, IconH1, IconH2, @@ -11,7 +12,6 @@ import { IconTable, } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { SuggestionItem } from '@/ui/input/editor/components/CustomSlashMenu'; import { blockSchema } from './schema'; diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx index 5061ab65f..fd74b42b2 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx @@ -1,6 +1,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { + IconComponent, IconFile, IconFileText, IconFileZip, @@ -12,7 +13,6 @@ import { } from 'twenty-ui'; import { AttachmentType } from '@/activities/files/types/Attachment'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; const StyledIconContainer = styled.div<{ background: string }>` align-items: center; diff --git a/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx b/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx index 25bfda751..79e915dc6 100644 --- a/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx +++ b/packages/twenty-front/src/modules/auth/hooks/__test__/useAuth.test.tsx @@ -4,6 +4,7 @@ import { MockedProvider } from '@apollo/client/testing'; import { expect } from '@storybook/test'; import { act, renderHook } from '@testing-library/react'; import { RecoilRoot, useRecoilValue } from 'recoil'; +import { iconsState } from 'twenty-ui'; import { useAuth } from '@/auth/hooks/useAuth'; import { authProvidersState } from '@/client-config/states/authProvidersState'; @@ -12,7 +13,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState'; import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState'; import { supportChatState } from '@/client-config/states/supportChatState'; import { telemetryState } from '@/client-config/states/telemetryState'; -import { iconsState } from '@/ui/display/icon/states/iconsState'; import { email, mocks, password, results, token } from '../__mocks__/useAuth'; diff --git a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts index dce9f5942..5b1664fc3 100644 --- a/packages/twenty-front/src/modules/auth/hooks/useAuth.ts +++ b/packages/twenty-front/src/modules/auth/hooks/useAuth.ts @@ -7,6 +7,7 @@ import { useRecoilState, useSetRecoilState, } from 'recoil'; +import { iconsState } from 'twenty-ui'; import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState'; import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState'; @@ -20,7 +21,6 @@ import { isDebugModeState } from '@/client-config/states/isDebugModeState'; import { isSignInPrefilledState } from '@/client-config/states/isSignInPrefilledState'; import { supportChatState } from '@/client-config/states/supportChatState'; import { telemetryState } from '@/client-config/states/telemetryState'; -import { iconsState } from '@/ui/display/icon/states/iconsState'; import { ColorScheme } from '@/workspace-member/types/WorkspaceMember'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx index 1825542e4..6aa443e24 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpForm.tsx @@ -4,13 +4,13 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import { useRecoilState } from 'recoil'; +import { IconGoogle } from 'twenty-ui'; import { useHandleResetPassword } from '@/auth/sign-in-up/hooks/useHandleResetPassword.ts'; import { useSignInUpForm } from '@/auth/sign-in-up/hooks/useSignInUpForm.ts'; import { useSignInWithGoogle } from '@/auth/sign-in-up/hooks/useSignInWithGoogle.ts'; import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash.ts'; import { authProvidersState } from '@/client-config/states/authProvidersState.ts'; -import { IconGoogle } from '@/ui/display/icon/components/IconGoogle'; import { Loader } from '@/ui/feedback/loader/components/Loader'; import { MainButton } from '@/ui/input/button/components/MainButton'; import { TextInput } from '@/ui/input/components/TextInput'; diff --git a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx index e19cea309..e275f6c5c 100644 --- a/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx +++ b/packages/twenty-front/src/modules/command-menu/components/CommandMenuItem.tsx @@ -1,8 +1,7 @@ import { isNonEmptyString } from '@sniptt/guards'; import { useRecoilValue } from 'recoil'; -import { IconArrowUpRight } from 'twenty-ui'; +import { IconArrowUpRight, IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList'; import { MenuItemCommand } from '@/ui/navigation/menu-item/components/MenuItemCommand'; diff --git a/packages/twenty-front/src/modules/command-menu/types/Command.ts b/packages/twenty-front/src/modules/command-menu/types/Command.ts index eb7e43c72..38b430bb3 100644 --- a/packages/twenty-front/src/modules/command-menu/types/Command.ts +++ b/packages/twenty-front/src/modules/command-menu/types/Command.ts @@ -1,4 +1,4 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; export enum CommandType { Navigate = 'Navigate', diff --git a/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx b/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx index ecd37e8e2..eb80049a9 100644 --- a/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx +++ b/packages/twenty-front/src/modules/error-handler/components/AppErrorBoundary.tsx @@ -1,5 +1,7 @@ import { ErrorInfo, ReactNode } from 'react'; import { ErrorBoundary } from 'react-error-boundary'; +import { ThemeProvider } from '@emotion/react'; +import { THEME_LIGHT } from 'twenty-ui'; import { GenericErrorFallback } from '@/error-handler/components/GenericErrorFallback'; @@ -9,11 +11,13 @@ export const AppErrorBoundary = ({ children }: { children: ReactNode }) => { }; return ( - - {children} - + + + {children} + + ); }; diff --git a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx index 593f57ff3..6c73d5633 100644 --- a/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx +++ b/packages/twenty-front/src/modules/navigation/components/MobileNavigationBar.tsx @@ -1,11 +1,16 @@ import { useNavigate } from 'react-router-dom'; import { useRecoilState } from 'recoil'; -import { IconCheckbox, IconList, IconSearch, IconSettings } from 'twenty-ui'; +import { + IconCheckbox, + IconComponent, + IconList, + IconSearch, + IconSettings, +} from 'twenty-ui'; import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu'; import { isCommandMenuOpenedState } from '@/command-menu/states/isCommandMenuOpenedState'; import { AppPath } from '@/types/AppPath'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { NavigationBar } from '@/ui/navigation/navigation-bar/components/NavigationBar'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx index 6bcd4c819..cbecac575 100644 --- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx +++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx @@ -1,9 +1,9 @@ import { useLocation, useNavigate } from 'react-router-dom'; +import { useIcons } from 'twenty-ui'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { usePrefetchedData } from '@/prefetch/hooks/usePrefetchedData'; import { PrefetchKey } from '@/prefetch/types/PrefetchKey'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem'; import { GraphQLView } from '@/views/types/GraphQLView'; import { getObjectMetadataItemViews } from '@/views/utils/getObjectMetadataItemViews'; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx index 38e3b89c4..b64988cec 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/GenericEntityFilterChip.tsx @@ -1,5 +1,6 @@ +import { IconComponent } from 'twenty-ui'; + import { EntityChip } from '@/ui/display/chip/components/EntityChip'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Filter } from '../types/Filter'; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx index 676fcb9a3..bd8c69977 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx @@ -1,8 +1,8 @@ import { useRecoilValue } from 'recoil'; +import { useIcons } from 'twenty-ui'; import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem'; import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope'; diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts index 63b517d3e..954562f4f 100644 --- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts +++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/types/FilterDefinition.ts @@ -1,4 +1,4 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; import { FilterType } from './FilterType'; diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx index 89da251bc..02ca43184 100644 --- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx +++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx @@ -1,9 +1,8 @@ -import { IconChevronDown } from 'twenty-ui'; +import { IconChevronDown, useIcons } from 'twenty-ui'; import { OBJECT_SORT_DROPDOWN_ID } from '@/object-record/object-sort-dropdown/constants/ObjectSortDropdownId'; import { useObjectSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useObjectSortDropdown'; import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { LightButton } from '@/ui/input/button/components/LightButton'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader'; diff --git a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts index f2a5713cb..46e880ff8 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts +++ b/packages/twenty-front/src/modules/object-record/record-board/types/RecordBoardColumnAction.ts @@ -1,4 +1,4 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; export type RecordBoardColumnAction = { id: string; diff --git a/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts b/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts index 4dde37b2e..ebec13c24 100644 --- a/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts +++ b/packages/twenty-front/src/modules/object-record/record-field/hooks/useGetButtonIcon.ts @@ -1,8 +1,7 @@ import { useContext } from 'react'; -import { IconPencil } from 'twenty-ui'; +import { IconComponent, IconPencil } from 'twenty-ui'; import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull'; import { FieldContext } from '../contexts/FieldContext'; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx index cddd82ddb..a35a3b7cb 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx @@ -1,4 +1,5 @@ import { useContext } from 'react'; +import { useIcons } from 'twenty-ui'; import { FieldDisplay } from '@/object-record/record-field/components/FieldDisplay'; import { FieldInput } from '@/object-record/record-field/components/FieldInput'; @@ -9,7 +10,6 @@ import { useIsFieldInputOnly } from '@/object-record/record-field/hooks/useIsFie import { FieldInputEvent } from '@/object-record/record-field/types/FieldInputEvent'; import { isFieldRelation } from '@/object-record/record-field/types/guards/isFieldRelation'; import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { useInlineCell } from '../hooks/useInlineCell'; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx index 64b349301..d16ebd20f 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx @@ -3,9 +3,9 @@ import { Tooltip } from 'react-tooltip'; import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { motion } from 'framer-motion'; +import { IconComponent } from 'twenty-ui'; import { FieldContext } from '@/object-record/record-field/contexts/FieldContext'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { EllipsisDisplay } from '@/ui/field/display/components/EllipsisDisplay'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx index af1954081..3bd50946b 100644 --- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditButton.tsx @@ -1,4 +1,5 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; + import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton'; export const RecordInlineCellButton = ({ Icon }: { Icon: IconComponent }) => { diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx index 3cd869643..a47aa9de0 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListEmptyState.tsx @@ -1,8 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; type RecordDetailRelationRecordsListEmptyStateProps = { relationObjectMetadataItem: ObjectMetadataItem; diff --git a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx index fd46315ae..319073b01 100644 --- a/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx +++ b/packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx @@ -4,6 +4,7 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; import { IconChevronDown, + IconComponent, IconDotsVertical, IconTrash, IconUnlink, @@ -30,7 +31,6 @@ import { RecordDetailRecordsListItem } from '@/object-record/record-show/record- import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRecordInStore'; import { ObjectRecord } from '@/object-record/types/ObjectRecord'; import { isFieldCellSupported } from '@/object-record/utils/isFieldCellSupported'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx index 5f3207bfa..f9150703d 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/ColumnHead.tsx @@ -1,9 +1,9 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import { useIcons } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { scrollLeftState } from '@/ui/utilities/scroll/states/scrollLeftState'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx index 136a888cc..2c7000458 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx @@ -2,13 +2,12 @@ import { useCallback } from 'react'; import { Link } from 'react-router-dom'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconSettings } from 'twenty-ui'; +import { IconSettings, useIcons } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { useRecordTableStates } from '@/object-record/record-table/hooks/internal/useRecordTableStates'; import { useTableColumns } from '@/object-record/record-table/hooks/useTableColumns'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx index fb528c947..51202803b 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButton.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton'; const StyledEditButtonContainer = styled(motion.div)` diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx index 69887f774..5aec39f9a 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditButton.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; import { motion } from 'framer-motion'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { FloatingIconButton } from '@/ui/input/button/components/FloatingIconButton'; const StyledEditButtonContainer = styled(motion.div)` diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx index a71fa24a9..3ede46b1d 100644 --- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx +++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItems.tsx @@ -1,10 +1,9 @@ import { useRef } from 'react'; import { isNonEmptyString } from '@sniptt/guards'; import { Key } from 'ts-key-enum'; -import { IconPlus } from 'twenty-ui'; +import { IconComponent, IconPlus } from 'twenty-ui'; import { SelectableMenuItemSelect } from '@/object-record/relation-picker/components/SelectableMenuItemSelect'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { CreateNewButton } from '@/ui/input/relation-picker/components/CreateNewButton'; import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; diff --git a/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts b/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts index 56453adf1..d426ba6bc 100644 --- a/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts +++ b/packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts @@ -1,12 +1,11 @@ import { isNonEmptyString } from '@sniptt/guards'; +import { IconComponent, useIcons } from 'twenty-ui'; import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem'; import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords'; import { getSpreadSheetValidation } from '@/object-record/spreadsheet-import/util/getSpreadSheetValidation'; import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport'; import { SpreadsheetOptions, Validation } from '@/spreadsheet-import/types'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar'; import { FieldMetadataType } from '~/generated-metadata/graphql'; import { isDefined } from '~/utils/isDefined'; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx index 3222dc89b..06ed53981 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsCalendarChannelsListCard.tsx @@ -1,7 +1,7 @@ import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconChevronRight } from 'twenty-ui'; +import { IconChevronRight, IconGoogleCalendar } from 'twenty-ui'; import { CalendarChannel } from '@/accounts/types/CalendarChannel'; import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; @@ -14,7 +14,6 @@ import { SettingsAccountsSynchronizationStatusProps, } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus'; import { SettingsListCard } from '@/settings/components/SettingsListCard'; -import { IconGoogleCalendar } from '@/ui/display/icon/components/IconGoogleCalendar'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; const StyledRowRightContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx index 1f215f81f..5bb870d77 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsConnectedAccountsListCard.tsx @@ -1,12 +1,12 @@ import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; +import { IconGoogle } from 'twenty-ui'; import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; import { SettingsAccountsListEmptyStateCard } from '@/settings/accounts/components/SettingsAccountsListEmptyStateCard'; import { SettingsAccountsRowDropdownMenu } from '@/settings/accounts/components/SettingsAccountsRowDropdownMenu'; import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath'; import { SettingsPath } from '@/types/SettingsPath'; -import { IconGoogle } from '@/ui/display/icon/components/IconGoogle'; import { Status } from '@/ui/display/status/components/Status'; import { SettingsListCard } from '../../components/SettingsListCard'; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx index ffdc1deaf..3ea636939 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsListEmptyStateCard.tsx @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; +import { IconGoogle } from 'twenty-ui'; import { useTriggerGoogleApisOAuth } from '@/settings/accounts/hooks/useTriggerGoogleApisOAuth'; -import { IconGoogle } from '@/ui/display/icon/components/IconGoogle'; import { Button } from '@/ui/input/button/components/Button'; import { Card } from '@/ui/layout/card/components/Card'; import { CardContent } from '@/ui/layout/card/components/CardContent'; diff --git a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx index 3500d3035..010691744 100644 --- a/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx @@ -1,7 +1,7 @@ import { useNavigate } from 'react-router-dom'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconChevronRight } from 'twenty-ui'; +import { IconChevronRight, IconGmail } from 'twenty-ui'; import { ConnectedAccount } from '@/accounts/types/ConnectedAccount'; import { MessageChannel } from '@/accounts/types/MessageChannel'; @@ -14,7 +14,6 @@ import { SettingsAccountsSynchronizationStatusProps, } from '@/settings/accounts/components/SettingsAccountsSynchronizationStatus'; import { SettingsListCard } from '@/settings/components/SettingsListCard'; -import { IconGmail } from '@/ui/display/icon/components/IconGmail'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; const StyledRowRightContainer = styled.div` diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx index b1b35854a..86466c6ff 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsListCard.tsx @@ -1,10 +1,9 @@ import { ComponentType } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconPlus } from 'twenty-ui'; +import { IconComponent, IconPlus } from 'twenty-ui'; import { SettingsListSkeletonCard } from '@/settings/components/SettingsListSkeletonCard'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Card } from '@/ui/layout/card/components/Card'; import { CardFooter } from '@/ui/layout/card/components/CardFooter'; diff --git a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx index 2daae18f5..b0292e112 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsListItemCardContent.tsx @@ -1,8 +1,8 @@ import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { CardContent } from '@/ui/layout/card/components/CardContent'; const StyledRow = styled(CardContent)` diff --git a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx index 9ea5854fc..8d44dfcfc 100644 --- a/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx +++ b/packages/twenty-front/src/modules/settings/components/SettingsNavigationCard.tsx @@ -1,9 +1,8 @@ import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconChevronRight, Pill } from 'twenty-ui'; +import { IconChevronRight, IconComponent, Pill } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Card } from '@/ui/layout/card/components/Card'; import { CardContent } from '@/ui/layout/card/components/CardContent'; diff --git a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx index 76ecf2a83..4df29780d 100644 --- a/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation'; import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { IconPicker } from '@/ui/input/components/IconPicker'; import { Select } from '@/ui/input/components/Select'; import { TextInput } from '@/ui/input/components/TextInput'; diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts index 2dda881ab..5fc89008d 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/RelationTypes.ts @@ -1,6 +1,9 @@ -import { IconLayersLinked, IconRelationOneToOne } from 'twenty-ui'; +import { + IconComponent, + IconLayersLinked, + IconRelationOneToOne, +} from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { RelationMetadataType } from '~/generated-metadata/graphql'; import OneToManySvg from '../assets/OneToMany.svg'; diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts index 89cf79ee4..246160221 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldCurrencyCodes.ts @@ -1,4 +1,5 @@ import { + IconComponent, IconCurrencyDollar, IconCurrencyEuro, IconCurrencyFrank, @@ -8,7 +9,6 @@ import { } from 'twenty-ui'; import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; export const SETTINGS_FIELD_CURRENCY_CODES: Record< CurrencyCode, diff --git a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts index 1ee3a2755..168b8ef3a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts +++ b/packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts @@ -2,6 +2,7 @@ import { IconCalendarEvent, IconCheck, IconCoins, + IconComponent, IconJson, IconKey, IconLink, @@ -13,14 +14,13 @@ import { IconTag, IconTags, IconTextSize, + IconTwentyStar, IconUser, } from 'twenty-ui'; import { CurrencyCode } from '@/object-record/record-field/types/CurrencyCode'; import { DEFAULT_DATE_VALUE } from '@/settings/data-model/constants/DefaultDateValue'; import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType'; -import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { FieldMetadataType } from '~/generated-metadata/graphql'; DEFAULT_DATE_VALUE.setFullYear(DEFAULT_DATE_VALUE.getFullYear() + 2); diff --git a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx index 2914dee78..e41e18e34 100644 --- a/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreview.tsx @@ -1,5 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; @@ -11,7 +12,6 @@ import { SettingsObjectFieldSelectFormValues } from '@/settings/data-model/compo import { SettingsDataModelSetFieldValueEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetFieldValueEffect'; import { SettingsDataModelSetRecordEffect } from '@/settings/data-model/fields/preview/components/SettingsDataModelSetRecordEffect'; import { useFieldPreview } from '@/settings/data-model/fields/preview/hooks/useFieldPreview'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { FieldMetadataType } from '~/generated-metadata/graphql'; export type SettingsDataModelFieldPreviewProps = { diff --git a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx index c20aebd32..85aecd305 100644 --- a/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx @@ -1,8 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { Checkbox } from '@/ui/input/components/Checkbox'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx index 7b16f2a05..699fb380b 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldDataType.tsx @@ -1,10 +1,9 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconComponent, IconTwentyStar } from 'twenty-ui'; import { SettingsSupportedFieldType } from '@/settings/data-model/types/SettingsSupportedFieldType'; import { getSettingsFieldTypeConfig } from '@/settings/data-model/utils/getSettingsFieldTypeConfig'; -import { IconTwentyStar } from '@/ui/display/icon/components/IconTwentyStar'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { FieldMetadataType } from '~/generated-metadata/graphql'; type SettingsObjectFieldDataTypeProps = { diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx index 49d5b9642..7cb0549e2 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx @@ -2,13 +2,13 @@ import { ReactNode, useMemo } from 'react'; import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata'; import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem'; import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug'; import { FieldIdentifierType } from '@/settings/data-model/types/FieldIdentifierType'; import { isFieldTypeSupportedInSettings } from '@/settings/data-model/utils/isFieldTypeSupportedInSettings'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; import { Nullable } from '~/types/Nullable'; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx index 7a4ac6ab7..f19004c5a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx @@ -1,12 +1,12 @@ import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords'; import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag'; import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { TableCell } from '@/ui/layout/table/components/TableCell'; import { TableRow } from '@/ui/layout/table/components/TableRow'; diff --git a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx index 4b3627f54..c592bcc80 100644 --- a/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx @@ -1,12 +1,11 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconArchive, IconDotsVertical, IconPencil } from 'twenty-ui'; +import { IconArchive, IconDotsVertical, IconPencil, useIcons } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard'; import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag'; import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx index 0e7336384..f6b8aaa0a 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/SettingsDataModelObjectSummary.tsx @@ -1,10 +1,10 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { useIcons } from 'twenty-ui'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/SettingsDataModelObjectTypeTag'; import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; export type SettingsDataModelObjectSummaryProps = { className?: string; diff --git a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx index 6677111db..5a7b7cb1f 100644 --- a/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx +++ b/packages/twenty-front/src/modules/settings/data-model/objects/forms/components/SettingsDataModelObjectIdentifiersForm.tsx @@ -1,14 +1,13 @@ import { useMemo } from 'react'; import { Controller, useFormContext } from 'react-hook-form'; import styled from '@emotion/styled'; -import { IconCircleOff } from 'twenty-ui'; +import { IconCircleOff, useIcons } from 'twenty-ui'; import { z } from 'zod'; import { LABEL_IDENTIFIER_FIELD_METADATA_TYPES } from '@/object-metadata/constants/LabelIdentifierFieldMetadataTypes'; import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem'; import { getActiveFieldMetadataItems } from '@/object-metadata/utils/getActiveFieldMetadataItems'; import { objectMetadataItemSchema } from '@/object-metadata/validation-schemas/objectMetadataItemSchema'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { Select, SelectOption } from '@/ui/input/components/Select'; export const settingsDataModelObjectIdentifiersFormSchema = diff --git a/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts b/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts index cadcf4c92..e85ccf299 100644 --- a/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts +++ b/packages/twenty-front/src/modules/spreadsheet-import/types/index.ts @@ -1,9 +1,9 @@ +import { IconComponent } from 'twenty-ui'; import { ReadonlyDeep } from 'type-fest'; import { Columns } from '@/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep'; import { StepState } from '@/spreadsheet-import/steps/components/UploadFlow'; import { Meta } from '@/spreadsheet-import/steps/components/ValidationStep/types'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; export type SpreadsheetOptions = { // Is modal visible. diff --git a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx b/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx index 017921da1..76d4cd201 100644 --- a/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx +++ b/packages/twenty-front/src/modules/ui/display/chip/components/EntityChip.tsx @@ -2,8 +2,8 @@ import * as React from 'react'; import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import { isNonEmptyString } from '@sniptt/guards'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Avatar, AvatarType } from '@/users/components/Avatar'; import { Nullable } from '~/types/Nullable'; diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx deleted file mode 100644 index 2c8c72bfc..000000000 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconAddressBook.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { TablerIconsProps } from 'twenty-ui'; - -import IconAddressBookRaw from '../assets/address-book.svg?react'; - -type IconAddressBookProps = TablerIconsProps; - -export const IconAddressBook = (props: IconAddressBookProps): JSX.Element => { - const size = props.size ?? 24; - const stroke = props.stroke ?? 2; - - return ; -}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx deleted file mode 100644 index 25ce2eba0..000000000 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStar.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { TablerIconsProps } from 'twenty-ui'; - -import IconTwentyStarRaw from '../assets/twenty-star.svg?react'; - -type IconTwentyStarProps = TablerIconsProps; - -export const IconTwentyStar = (props: IconTwentyStarProps): JSX.Element => { - const size = props.size ?? 24; - const stroke = props.stroke ?? 2; - - return ; -}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx deleted file mode 100644 index e1933ea6d..000000000 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconTwentyStarFilled.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { TablerIconsProps } from 'twenty-ui'; - -import IconTwentyStarFilledRaw from '../assets/twenty-star-filled.svg?react'; - -type IconTwentyStarFilledProps = TablerIconsProps; - -export const IconTwentyStarFilled = ( - props: IconTwentyStarFilledProps, -): JSX.Element => { - const size = props.size ?? 24; - const stroke = props.stroke ?? 2; - - return ( - - ); -}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts b/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts deleted file mode 100644 index 654d6bcb7..000000000 --- a/packages/twenty-front/src/modules/ui/display/icon/states/iconsState.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { createState } from 'twenty-ui'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; - -export const iconsState = createState>({ - key: 'iconsState', - defaultValue: {}, -}); diff --git a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx b/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx index c475965e7..3a06c0234 100644 --- a/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx +++ b/packages/twenty-front/src/modules/ui/display/tag/components/Tag.tsx @@ -1,7 +1,7 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { ThemeColor } from '@/ui/theme/constants/MainColorNames'; import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema'; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx index 925bcc1b9..26b08752a 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/CurrencyInput.tsx @@ -1,10 +1,10 @@ import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; import { useRegisterInputEvents } from '@/object-record/record-field/meta-types/input/hooks/useRegisterInputEvents'; import { SETTINGS_FIELD_CURRENCY_CODES } from '@/settings/data-model/constants/SettingsFieldCurrencyCodes'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { CurrencyPickerDropdownButton } from '@/ui/input/components/internal/currency/components/CurrencyPickerDropdownButton'; import { TEXT_INPUT_STYLE } from '@/ui/theme/constants/TextInputStyle'; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx index ce1611926..58d1fd060 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/RatingInput.tsx @@ -1,10 +1,10 @@ import { useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconTwentyStarFilled } from 'twenty-ui'; import { RATING_VALUES } from '@/object-record/record-field/meta-types/constants/RatingValues'; import { FieldRatingValue } from '@/object-record/record-field/types/FieldMetadata'; -import { IconTwentyStarFilled } from '@/ui/display/icon/components/IconTwentyStarFilled'; const StyledContainer = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx index 14a896c80..fcd909785 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/Button.tsx @@ -1,9 +1,7 @@ import React from 'react'; import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { Pill } from 'twenty-ui'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent, Pill } from 'twenty-ui'; export type ButtonSize = 'medium' | 'small'; export type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx index 5406f2632..7ccecc0ff 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingButton.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; export type FloatingButtonSize = 'small' | 'medium'; export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx index 6e5f7e8d0..4a22cd1c4 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; export type FloatingIconButtonSize = 'small' | 'medium'; export type FloatingIconButtonPosition = diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx index e704bdefd..6d9a3ad60 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButtonGroup.tsx @@ -1,7 +1,6 @@ import { MouseEvent } from 'react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; import { FloatingIconButton, diff --git a/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx index 38a34b0cf..421962c87 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/IconButton.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; export type IconButtonSize = 'medium' | 'small'; export type IconButtonPosition = 'standalone' | 'left' | 'middle' | 'right'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx b/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx index 6335ee64d..32c989c68 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/IconButtonGroup.tsx @@ -1,7 +1,6 @@ import { MouseEvent } from 'react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; import { IconButton, IconButtonPosition, IconButtonProps } from './IconButton'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx index 140c4fc95..d35858251 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx @@ -1,8 +1,7 @@ import { MouseEvent } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; export type LightButtonAccent = 'secondary' | 'tertiary'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx index 87fe9144a..e8247c036 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx @@ -1,8 +1,7 @@ import { ComponentProps, MouseEvent } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; export type LightIconButtonAccent = 'secondary' | 'tertiary'; export type LightIconButtonSize = 'small' | 'medium'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx index adb20d64b..f1369cbf9 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButtonGroup.tsx @@ -1,7 +1,6 @@ import { MouseEvent } from 'react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; import { LightIconButton, LightIconButtonProps } from './LightIconButton'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx index 5bdc9ae0b..ae7550a01 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/MainButton.tsx @@ -1,8 +1,7 @@ import React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; type Variant = 'primary' | 'secondary'; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx index b6d9ac46c..3d9e89a26 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx +++ b/packages/twenty-front/src/modules/ui/input/button/components/RoundedIconButton.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; const StyledIconButton = styled.button` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx index f22bf568e..b0a0dd227 100644 --- a/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/IconPicker.tsx @@ -1,10 +1,8 @@ import { useMemo, useState } from 'react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconApps } from 'twenty-ui'; +import { IconApps, IconComponent, useIcons } from 'twenty-ui'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; diff --git a/packages/twenty-front/src/modules/ui/input/components/Select.tsx b/packages/twenty-front/src/modules/ui/input/components/Select.tsx index 783958fbd..dba88edbb 100644 --- a/packages/twenty-front/src/modules/ui/input/components/Select.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/Select.tsx @@ -1,9 +1,8 @@ import { useMemo, useRef, useState } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconChevronDown } from 'twenty-ui'; +import { IconChevronDown, IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput'; diff --git a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx index f7453fbb1..2efe7b835 100644 --- a/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/TextInput.tsx @@ -10,9 +10,8 @@ import { import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { Key } from 'ts-key-enum'; -import { IconAlertCircle, IconEye, IconEyeOff } from 'twenty-ui'; +import { IconAlertCircle, IconComponent, IconEye, IconEyeOff } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useCombinedRefs } from '~/hooks/useCombinedRefs'; diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx index 38bbbd98f..376f738d1 100644 --- a/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx +++ b/packages/twenty-front/src/modules/ui/input/components/internal/country/components/CountrySelect.tsx @@ -1,6 +1,6 @@ import { useMemo } from 'react'; +import { IconComponentProps } from 'twenty-ui'; -import { IconComponentProps } from '@/ui/display/icon/types/IconComponent'; import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId'; import { useCountries } from '@/ui/input/components/internal/hooks/useCountries'; import { Select, SelectOption } from '@/ui/input/components/Select'; diff --git a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx index 509fd9a74..6a7fd920e 100644 --- a/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx +++ b/packages/twenty-front/src/modules/ui/input/editor/components/CustomSlashMenu.tsx @@ -1,7 +1,7 @@ import { SuggestionMenuProps } from '@blocknote/react'; import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { MenuItemSuggestion } from '@/ui/navigation/menu-item/components/MenuItemSuggestion'; diff --git a/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts b/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts index 8d744bee4..36e2faf22 100644 --- a/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts +++ b/packages/twenty-front/src/modules/ui/input/states/iconPickerState.ts @@ -1,6 +1,4 @@ -import { createState, IconApps } from 'twenty-ui'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { createState, IconApps, IconComponent } from 'twenty-ui'; type IconPickerState = { Icon: IconComponent; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx index 3b6c829cd..0e46ef5e4 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx @@ -1,8 +1,8 @@ import { ComponentProps, MouseEvent } from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { LightIconButton } from '@/ui/input/button/components/LightIconButton'; const StyledHeader = styled.li` diff --git a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx index c258a5d55..061d45fd8 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/PageHeader.tsx @@ -4,9 +4,8 @@ import { useNavigate } from 'react-router-dom'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconChevronLeft } from 'twenty-ui'; +import { IconChevronLeft, IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip'; import { IconButton } from '@/ui/input/button/components/IconButton'; import { NavigationDrawerCollapseButton } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton'; diff --git a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx index 3c9642961..711400532 100644 --- a/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/page/SubMenuTopBarContainer.tsx @@ -1,7 +1,7 @@ import { JSX } from 'react'; import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; import { PageHeader } from './PageHeader'; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx index 240cc1666..ff024d20f 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/Tab.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { Pill } from 'twenty-ui'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent, Pill } from 'twenty-ui'; type TabProps = { id: string; diff --git a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx index ccb821faf..d65cee222 100644 --- a/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx +++ b/packages/twenty-front/src/modules/ui/layout/tab/components/TabList.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { useTabList } from '@/ui/layout/tab/hooks/useTabList'; import { TabListScope } from '@/ui/layout/tab/scopes/TabListScope'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; diff --git a/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts b/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts index 1ef345e3c..f37a9b2e8 100644 --- a/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts +++ b/packages/twenty-front/src/modules/ui/navigation/action-bar/types/ActionBarEntry.ts @@ -1,4 +1,5 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; + import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent'; export type ActionBarEntry = { diff --git a/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts b/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts index d858b6462..d56820d6e 100644 --- a/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts +++ b/packages/twenty-front/src/modules/ui/navigation/context-menu/types/ContextMenuEntry.ts @@ -1,4 +1,5 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; + import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent'; export type ContextMenuEntry = { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx index ea0c09c2b..eb97bad4a 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItem.tsx @@ -1,6 +1,6 @@ import { MouseEvent } from 'react'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx index 8b93424c6..7438aaf52 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemCommand.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; import { StyledMenuItemLabel, diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx index 185a58cb0..773de35e0 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemDraggable.tsx @@ -1,4 +1,5 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; + import { LightIconButtonGroup } from '@/ui/input/button/components/LightIconButtonGroup'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx index 81e1cd324..44ff578cf 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { Tag } from '@/ui/display/tag/components/Tag'; import { Checkbox } from '@/ui/input/components/Checkbox'; import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx index e8f9ef8a4..c0726868c 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemNavigate.tsx @@ -1,7 +1,5 @@ import { useTheme } from '@emotion/react'; -import { IconChevronRight } from 'twenty-ui'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconChevronRight, IconComponent } from 'twenty-ui'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx index 8d6e24ecd..d9329fe80 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelect.tsx @@ -1,8 +1,6 @@ import { css, useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconCheck } from 'twenty-ui'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconCheck, IconComponent } from 'twenty-ui'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; import { StyledMenuItemBase } from '../internals/components/StyledMenuItemBase'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx index 52d3a12ee..1876d1e1f 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSuggestion.tsx @@ -1,7 +1,7 @@ import { MouseEvent } from 'react'; import styled from '@emotion/styled'; +import { IconComponent } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { HOVER_BACKGROUND } from '@/ui/theme/constants/HoverBackground'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx index 99465e0ca..2692c6577 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemToggle.tsx @@ -1,4 +1,5 @@ -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; + import { Toggle, ToggleSize } from '@/ui/input/components/Toggle'; import { MenuItemLeftContent } from '../internals/components/MenuItemLeftContent'; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx index 7c41b4a31..3b3d636a2 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; -import { IconGripVertical } from 'twenty-ui'; +import { IconComponent, IconGripVertical } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip'; import { diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx index 8ab53a38b..92c8e0072 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBar.tsx @@ -1,6 +1,5 @@ import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; import { NavigationBarItem } from './NavigationBarItem'; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx index ccd6b7d3f..e7259d905 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/NavigationBarItem.tsx @@ -1,7 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent } from 'twenty-ui'; const StyledIconButton = styled.div<{ isActive?: boolean }>` align-items: center; diff --git a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx index aec5d35cf..f1364db20 100644 --- a/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx @@ -3,9 +3,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; import { useSetRecoilState } from 'recoil'; -import { Pill } from 'twenty-ui'; +import { IconComponent, Pill } from 'twenty-ui'; -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState'; import { MOBILE_VIEWPORT } from '@/ui/theme/constants/MobileViewport'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; diff --git a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx index af7529729..c7f727d8b 100644 --- a/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx +++ b/packages/twenty-front/src/modules/views/components/EditableFilterChip.tsx @@ -1,6 +1,7 @@ +import { useIcons } from 'twenty-ui'; + import { Filter } from '@/object-record/object-filter-dropdown/types/Filter'; import { getOperandLabelShort } from '@/object-record/object-filter-dropdown/utils/getOperandLabel'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { SortOrFilterChip } from '@/views/components/SortOrFilterChip'; type EditableFilterChipProps = { diff --git a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx index 3da7f3405..47106b58c 100644 --- a/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx +++ b/packages/twenty-front/src/modules/views/components/SortOrFilterChip.tsx @@ -1,8 +1,6 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; -import { IconX } from 'twenty-ui'; - -import { IconComponent } from '@/ui/display/icon/types/IconComponent'; +import { IconComponent, IconX } from 'twenty-ui'; const StyledChip = styled.div` align-items: center; diff --git a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx index bd8b19cc6..72954b829 100644 --- a/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx +++ b/packages/twenty-front/src/modules/views/components/ViewFieldsVisibilityDropdownSection.tsx @@ -5,11 +5,10 @@ import { OnDragEndResponder, ResponderProvided, } from '@hello-pangea/dnd'; -import { IconInfoCircle, IconMinus, IconPlus } from 'twenty-ui'; +import { IconInfoCircle, IconMinus, IconPlus, useIcons } from 'twenty-ui'; import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata'; import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { AppTooltip } from '@/ui/display/tooltip/AppTooltip'; import { DraggableItem } from '@/ui/layout/draggable-list/components/DraggableItem'; import { DraggableList } from '@/ui/layout/draggable-list/components/DraggableList'; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx index 53e455feb..89508dbdc 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerDropdown.tsx @@ -1,9 +1,8 @@ import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { useRecoilValue } from 'recoil'; -import { IconChevronDown, IconList } from 'twenty-ui'; +import { IconChevronDown, IconList, useIcons } from 'twenty-ui'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx index 03aec0017..b0314f42c 100644 --- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx +++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerListContent.tsx @@ -1,9 +1,8 @@ import { MouseEvent } from 'react'; import styled from '@emotion/styled'; import { useSetRecoilState } from 'recoil'; -import { IconLock, IconPencil, IconPlus } from 'twenty-ui'; +import { IconLock, IconPencil, IconPlus, useIcons } from 'twenty-ui'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer'; import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator'; import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; diff --git a/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx b/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx index 4ee949ff9..f92acab85 100644 --- a/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordIndexPageHeader.tsx @@ -1,9 +1,9 @@ import { useParams } from 'react-router-dom'; import { useRecoilValue } from 'recoil'; +import { useIcons } from 'twenty-ui'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { recordIndexViewTypeState } from '@/object-record/record-index/states/recordIndexViewTypeState'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { PageAddButton } from '@/ui/layout/page/PageAddButton'; import { PageHeader } from '@/ui/layout/page/PageHeader'; import { PageHotkeysEffect } from '@/ui/layout/page/PageHotkeysEffect'; diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx index f75b0b0aa..52c1d9f68 100644 --- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx +++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx @@ -1,6 +1,7 @@ import { useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { useSetRecoilState } from 'recoil'; +import { useIcons } from 'twenty-ui'; import { useFavorites } from '@/favorites/hooks/useFavorites'; import { useLabelIdentifierFieldMetadataItem } from '@/object-metadata/hooks/useLabelIdentifierFieldMetadataItem'; @@ -8,7 +9,6 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord'; import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer'; import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; import { PageBody } from '@/ui/layout/page/PageBody'; import { PageContainer } from '@/ui/layout/page/PageContainer'; import { PageFavoriteButton } from '@/ui/layout/page/PageFavoriteButton'; diff --git a/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx b/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx index b697a5b2d..9ba0caeab 100644 --- a/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx +++ b/packages/twenty-front/src/testing/decorators/IconsProviderDecorator.tsx @@ -1,6 +1,5 @@ import { Decorator } from '@storybook/react'; - -import { IconsProvider } from '@/ui/display/icon/components/IconsProvider'; +import { IconsProvider } from 'twenty-ui'; export const IconsProviderDecorator: Decorator = (Story) => { return ( diff --git a/packages/twenty-front/tsconfig.json b/packages/twenty-front/tsconfig.json index ae837c98f..4bde090be 100644 --- a/packages/twenty-front/tsconfig.json +++ b/packages/twenty-front/tsconfig.json @@ -22,7 +22,8 @@ "paths": { "@/*": ["packages/twenty-front/src/modules/*"], "~/*": ["packages/twenty-front/src/*"], - "twenty-ui": ["packages/twenty-ui/src/index.ts"] + "twenty-ui": ["packages/twenty-ui/src/index.ts"], + "@ui/*": ["packages/twenty-ui/src/*"] } }, "files": [], diff --git a/packages/twenty-front/tsup.ui.index.tsx b/packages/twenty-front/tsup.ui.index.tsx index e0e520ce6..221bbfc06 100644 --- a/packages/twenty-front/tsup.ui.index.tsx +++ b/packages/twenty-front/tsup.ui.index.tsx @@ -14,7 +14,6 @@ export * from './src/modules/ui/display/checkmark/components/Checkmark'; export * from './src/modules/ui/display/checkmark/components/AnimatedCheckmark' export * from './src/modules/ui/display/chip/components/Chip' export * from './src/modules/ui/display/chip/components/EntityChip' -export * from './src/modules/ui/display/icon/components/IconAddressBook' export * from './src/modules/ui/display/tag/components/Tag' export * from './src/modules/ui/display/tooltip/AppTooltip' export * from './src/modules/ui/display/tooltip/OverflowingTextWithTooltip' diff --git a/packages/twenty-front/vite.config.ts b/packages/twenty-front/vite.config.ts index c5b59b84c..cdfcd2cc7 100644 --- a/packages/twenty-front/vite.config.ts +++ b/packages/twenty-front/vite.config.ts @@ -43,11 +43,7 @@ export default defineConfig(({ command, mode }) => { plugins: [ react({ jsxImportSource: '@emotion/react' }), tsconfigPaths({ - projects: [ - 'tsconfig.json', - // Include internal library aliases in development mode, so hot reload is enabled for libraries. - mode === 'development' ? '../twenty-ui/tsconfig.json' : undefined, - ].filter(Boolean) as string[], + projects: ['tsconfig.json', '../twenty-ui/tsconfig.json'], }), svgr(), checker(checkers), diff --git a/packages/twenty-ui/jest.config.ts b/packages/twenty-ui/jest.config.ts index e5840eb2a..a51f90298 100644 --- a/packages/twenty-ui/jest.config.ts +++ b/packages/twenty-ui/jest.config.ts @@ -19,4 +19,3 @@ export default { extensionsToTreatAsEsm: ['.ts', '.tsx'], coverageDirectory: './coverage', }; - diff --git a/packages/twenty-ui/package.json b/packages/twenty-ui/package.json index 1653b0fdc..46db16274 100644 --- a/packages/twenty-ui/package.json +++ b/packages/twenty-ui/package.json @@ -11,6 +11,6 @@ } }, "scripts": { - "build": "vite build" + "build": "npx vite build" } } diff --git a/packages/twenty-ui/project.json b/packages/twenty-ui/project.json index c32123554..9683e50dd 100644 --- a/packages/twenty-ui/project.json +++ b/packages/twenty-ui/project.json @@ -17,8 +17,7 @@ ], "outputs": ["{projectRoot}/src/index.ts", "{projectRoot}/src/*/index.ts"], "options": { - "outputPath": "{projectRoot}/dist", - "command": "npx ts-node --esm {projectRoot}/scripts/generateBarrels.ts" + "command": "node {projectRoot}/scripts/generateBarrels.js" } }, "lint": { diff --git a/packages/twenty-ui/scripts/generateBarrels.ts b/packages/twenty-ui/scripts/generateBarrels.js similarity index 86% rename from packages/twenty-ui/scripts/generateBarrels.ts rename to packages/twenty-ui/scripts/generateBarrels.js index 23831fd90..8988c1e8e 100644 --- a/packages/twenty-ui/scripts/generateBarrels.ts +++ b/packages/twenty-ui/scripts/generateBarrels.js @@ -18,7 +18,11 @@ const excludedDirectories = [ ]; const srcPath = path.resolve('packages/twenty-ui/src'); -const getSubDirectoryPaths = (directoryPath: string) => +/** + * @param {string} directoryPath + * @returns {string[]} + */ +const getSubDirectoryPaths = (directoryPath) => fs .readdirSync(directoryPath) .filter( @@ -30,12 +34,22 @@ const getSubDirectoryPaths = (directoryPath: string) => ) .map((subDirectoryName) => path.join(directoryPath, subDirectoryName)); -const getDirectoryPathsRecursive = (directoryPath: string): string[] => [ +/** + * + * @param {string} directoryPath + * @returns {string[]} + */ +const getDirectoryPathsRecursive = (directoryPath) => [ directoryPath, ...getSubDirectoryPaths(directoryPath).flatMap(getDirectoryPathsRecursive), ]; -const getFilesPaths = (directoryPath: string) => +/** + * + * @param {string} directoryPath + * @returns {string[]} + */ +const getFilesPaths = (directoryPath) => fs .readdirSync(directoryPath) .filter( diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/address-book.svg b/packages/twenty-ui/src/display/icon/assets/address-book.svg similarity index 100% rename from packages/twenty-front/src/modules/ui/display/icon/assets/address-book.svg rename to packages/twenty-ui/src/display/icon/assets/address-book.svg diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg b/packages/twenty-ui/src/display/icon/assets/gmail.svg similarity index 100% rename from packages/twenty-front/src/modules/ui/display/icon/assets/gmail.svg rename to packages/twenty-ui/src/display/icon/assets/gmail.svg diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google-calendar.svg b/packages/twenty-ui/src/display/icon/assets/google-calendar.svg similarity index 100% rename from packages/twenty-front/src/modules/ui/display/icon/assets/google-calendar.svg rename to packages/twenty-ui/src/display/icon/assets/google-calendar.svg diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/google.svg b/packages/twenty-ui/src/display/icon/assets/google.svg similarity index 100% rename from packages/twenty-front/src/modules/ui/display/icon/assets/google.svg rename to packages/twenty-ui/src/display/icon/assets/google.svg diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star-filled.svg b/packages/twenty-ui/src/display/icon/assets/twenty-star-filled.svg similarity index 100% rename from packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star-filled.svg rename to packages/twenty-ui/src/display/icon/assets/twenty-star-filled.svg diff --git a/packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star.svg b/packages/twenty-ui/src/display/icon/assets/twenty-star.svg similarity index 100% rename from packages/twenty-front/src/modules/ui/display/icon/assets/twenty-star.svg rename to packages/twenty-ui/src/display/icon/assets/twenty-star.svg diff --git a/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx b/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx new file mode 100644 index 000000000..aa331c173 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IconAddressBook.tsx @@ -0,0 +1,14 @@ +import { useTheme } from '@emotion/react'; + +import IconAddressBookRaw from '@ui/display/icon/assets/address-book.svg?react'; +import { IconComponentProps } from '@ui/display/icon/types/IconComponent'; + +type IconAddressBookProps = Pick; + +export const IconAddressBook = (props: IconAddressBookProps) => { + const theme = useTheme(); + const size = props.size ?? 24; + const stroke = props.stroke ?? theme.icon.stroke.md; + + return ; +}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx similarity index 54% rename from packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx rename to packages/twenty-ui/src/display/icon/components/IconGmail.tsx index 647780e27..babde8ce7 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGmail.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGmail.tsx @@ -1,10 +1,9 @@ import { useTheme } from '@emotion/react'; -import IconGmailRaw from '../assets/gmail.svg?react'; +import IconGmailRaw from '@ui/display/icon/assets/gmail.svg?react'; +import { IconComponentProps } from '@ui/display/icon/types/IconComponent'; -interface IconGmailProps { - size?: number; -} +type IconGmailProps = Pick; export const IconGmail = (props: IconGmailProps) => { const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx similarity index 54% rename from packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx rename to packages/twenty-ui/src/display/icon/components/IconGoogle.tsx index 7ab67694f..4322018d5 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogle.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGoogle.tsx @@ -1,10 +1,9 @@ import { useTheme } from '@emotion/react'; -import IconGoogleRaw from '../assets/google.svg?react'; +import IconGoogleRaw from '@ui/display/icon/assets/google.svg?react'; +import { IconComponentProps } from '@ui/display/icon/types/IconComponent'; -interface IconGoogleProps { - size?: number; -} +type IconGoogleProps = Pick; export const IconGoogle = (props: IconGoogleProps) => { const theme = useTheme(); diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx similarity index 53% rename from packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx rename to packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx index 49ee58c95..039d629fc 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconGoogleCalendar.tsx +++ b/packages/twenty-ui/src/display/icon/components/IconGoogleCalendar.tsx @@ -1,10 +1,9 @@ import { useTheme } from '@emotion/react'; -import IconGoogleCalendarRaw from '../assets/google-calendar.svg?react'; +import IconGoogleCalendarRaw from '@ui/display/icon/assets/google-calendar.svg?react'; +import { IconComponentProps } from '@ui/display/icon/types/IconComponent'; -type IconGoogleCalendarProps = { - size?: number; -}; +type IconGoogleCalendarProps = Pick; export const IconGoogleCalendar = (props: IconGoogleCalendarProps) => { const theme = useTheme(); diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx new file mode 100644 index 000000000..8da1dcc56 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStar.tsx @@ -0,0 +1,14 @@ +import { useTheme } from '@emotion/react'; + +import IconTwentyStarRaw from '@ui/display/icon/assets/twenty-star.svg?react'; +import { IconComponentProps } from '@ui/display/icon/types/IconComponent'; + +type IconTwentyStarProps = Pick; + +export const IconTwentyStar = (props: IconTwentyStarProps) => { + const theme = useTheme(); + const size = props.size ?? 24; + const stroke = props.stroke ?? theme.icon.stroke.md; + + return ; +}; diff --git a/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx new file mode 100644 index 000000000..465483017 --- /dev/null +++ b/packages/twenty-ui/src/display/icon/components/IconTwentyStarFilled.tsx @@ -0,0 +1,16 @@ +import { useTheme } from '@emotion/react'; + +import IconTwentyStarFilledRaw from '@ui/display/icon/assets/twenty-star-filled.svg?react'; +import { IconComponentProps } from '@ui/display/icon/types/IconComponent'; + +type IconTwentyStarFilledProps = Pick; + +export const IconTwentyStarFilled = (props: IconTwentyStarFilledProps) => { + const theme = useTheme(); + const size = props.size ?? 24; + const stroke = props.stroke ?? theme.icon.stroke.md; + + return ( + + ); +}; diff --git a/packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts similarity index 87% rename from packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts rename to packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts index aaf70aa02..4a7da2d15 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/hooks/__tests__/useIcons.test.ts +++ b/packages/twenty-ui/src/display/icon/hooks/__tests__/useIcons.test.ts @@ -1,8 +1,12 @@ import { renderHook } from '@testing-library/react'; import * as recoil from 'recoil'; -import { Icon123, IconBuildingSkyscraper, IconUser } from 'twenty-ui'; -import { useIcons } from '@/ui/display/icon/hooks/useIcons'; +import { + Icon123, + IconBuildingSkyscraper, + IconUser, +} from '@ui/display/icon/components/TablerIcons'; +import { useIcons } from '@ui/display/icon/hooks/useIcons'; describe('useIcons', () => { const mockedStateIcons = { diff --git a/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts similarity index 73% rename from packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts rename to packages/twenty-ui/src/display/icon/hooks/useIcons.ts index a1dd37b4c..c07d0a38a 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/hooks/useIcons.ts +++ b/packages/twenty-ui/src/display/icon/hooks/useIcons.ts @@ -1,7 +1,7 @@ import { useRecoilValue } from 'recoil'; -import { Icon123 } from 'twenty-ui'; -import { iconsState } from '@/ui/display/icon/states/iconsState'; +import { Icon123 } from '@ui/display/icon/components/TablerIcons'; +import { iconsState } from '@ui/display/icon/states/iconsState'; export const useIcons = () => { const icons = useRecoilValue(iconsState); diff --git a/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx b/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx similarity index 65% rename from packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx rename to packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx index 918d7d32d..06197586d 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/components/IconsProvider.tsx +++ b/packages/twenty-ui/src/display/icon/providers/IconsProvider.tsx @@ -1,7 +1,7 @@ import { useEffect } from 'react'; import { useSetRecoilState } from 'recoil'; -import { iconsState } from '@/ui/display/icon/states/iconsState'; +import { iconsState } from '@ui/display/icon/states/iconsState'; type IconsProviderProps = { children: JSX.Element; @@ -11,8 +11,8 @@ export const IconsProvider = ({ children }: IconsProviderProps) => { const setIcons = useSetRecoilState(iconsState); useEffect(() => { - import('../constants/index').then((lazyLoadedIcons) => { - setIcons(lazyLoadedIcons.default); + import('./internal/AllIcons').then((lazyLoadedIcons) => { + setIcons(lazyLoadedIcons.ALL_ICONS); }); }, [setIcons]); diff --git a/packages/twenty-front/src/modules/ui/display/icon/constants/index.ts b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts similarity index 99% rename from packages/twenty-front/src/modules/ui/display/icon/constants/index.ts rename to packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts index 8c0c4b267..8e547dbdd 100644 --- a/packages/twenty-front/src/modules/ui/display/icon/constants/index.ts +++ b/packages/twenty-ui/src/display/icon/providers/internal/AllIcons.ts @@ -24,7 +24,6 @@ import { IconAd2, IconAdCircle, IconAdCircleOff, - IconAddressBook, IconAddressBookOff, IconAdjustments, IconAdjustmentsAlt, @@ -4198,15 +4197,15 @@ import { IconZzzOff, } from '@tabler/icons-react'; -export default { - Icon123, - Icon24Hours, +export const ALL_ICONS = { Icon2fa, - Icon360, - Icon360View, Icon3dCubeSphere, Icon3dCubeSphereOff, Icon3dRotate, + Icon24Hours, + Icon123, + Icon360, + Icon360View, IconAB, IconAB2, IconAbacus, @@ -4223,7 +4222,6 @@ export default { IconAd2, IconAdCircle, IconAdCircleOff, - IconAddressBook, IconAddressBookOff, IconAdjustments, IconAdjustmentsAlt, @@ -5440,9 +5438,6 @@ export default { IconClockExclamation, IconClockHeart, IconClockHour1, - IconClockHour10, - IconClockHour11, - IconClockHour12, IconClockHour2, IconClockHour3, IconClockHour4, @@ -5451,6 +5446,9 @@ export default { IconClockHour7, IconClockHour8, IconClockHour9, + IconClockHour10, + IconClockHour11, + IconClockHour12, IconClockMinus, IconClockOff, IconClockPause, @@ -7117,10 +7115,10 @@ export default { IconMovieOff, IconMug, IconMugOff, - IconMultiplier05x, - IconMultiplier15x, IconMultiplier1x, IconMultiplier2x, + IconMultiplier05x, + IconMultiplier15x, IconMushroom, IconMushroomOff, IconMusic, @@ -7515,20 +7513,20 @@ export default { IconReservedLine, IconResize, IconRestore, + IconRewindBackward5, IconRewindBackward10, IconRewindBackward15, IconRewindBackward20, IconRewindBackward30, IconRewindBackward40, - IconRewindBackward5, IconRewindBackward50, IconRewindBackward60, + IconRewindForward5, IconRewindForward10, IconRewindForward15, IconRewindForward20, IconRewindForward30, IconRewindForward40, - IconRewindForward5, IconRewindForward50, IconRewindForward60, IconRibbonHealth, @@ -8080,11 +8078,11 @@ export default { IconTiltShift, IconTiltShiftOff, IconTimeDuration0, + IconTimeDuration5, IconTimeDuration10, IconTimeDuration15, IconTimeDuration30, IconTimeDuration45, - IconTimeDuration5, IconTimeDuration60, IconTimeDuration90, IconTimeDurationOff, diff --git a/packages/twenty-ui/src/display/icon/states/iconsState.ts b/packages/twenty-ui/src/display/icon/states/iconsState.ts new file mode 100644 index 000000000..45be6145a --- /dev/null +++ b/packages/twenty-ui/src/display/icon/states/iconsState.ts @@ -0,0 +1,7 @@ +import { IconComponent } from '@ui/display/icon/types/IconComponent'; +import { createState } from '@ui/utilities/state/utils/createState'; + +export const iconsState = createState>({ + key: 'iconsState', + defaultValue: {}, +}); diff --git a/packages/twenty-front/src/modules/ui/display/icon/types/IconComponent.ts b/packages/twenty-ui/src/display/icon/types/IconComponent.ts similarity index 100% rename from packages/twenty-front/src/modules/ui/display/icon/types/IconComponent.ts rename to packages/twenty-ui/src/display/icon/types/IconComponent.ts diff --git a/packages/twenty-ui/src/display/index.ts b/packages/twenty-ui/src/display/index.ts index bb37a9a66..fb8008a38 100644 --- a/packages/twenty-ui/src/display/index.ts +++ b/packages/twenty-ui/src/display/index.ts @@ -1 +1,11 @@ +export * from './icon/components/IconAddressBook'; +export * from './icon/components/IconGmail'; +export * from './icon/components/IconGoogle'; +export * from './icon/components/IconGoogleCalendar'; +export * from './icon/components/IconTwentyStar'; +export * from './icon/components/IconTwentyStarFilled'; export * from './icon/components/TablerIcons'; +export * from './icon/hooks/useIcons'; +export * from './icon/providers/IconsProvider'; +export * from './icon/states/iconsState'; +export * from './icon/types/IconComponent'; diff --git a/packages/twenty-ui/tsconfig.spec.json b/packages/twenty-ui/tsconfig.spec.json index 73b7fbbbf..ec6f83f0f 100644 --- a/packages/twenty-ui/tsconfig.spec.json +++ b/packages/twenty-ui/tsconfig.spec.json @@ -6,6 +6,7 @@ "types": ["jest", "node"] }, "include": [ + "vite.config.ts", "jest.config.ts", "setupTests.ts", "src/**/*.d.ts", diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts index e8c995a21..2451d0eda 100644 --- a/packages/twenty-ui/vite.config.ts +++ b/packages/twenty-ui/vite.config.ts @@ -1,18 +1,23 @@ /// -import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin'; import react from '@vitejs/plugin-react-swc'; import * as path from 'path'; import { defineConfig } from 'vite'; import checker from 'vite-plugin-checker'; import dts from 'vite-plugin-dts'; +import svgr from 'vite-plugin-svgr'; +import tsconfigPaths from 'vite-tsconfig-paths'; + +// eslint-disable-next-line @nx/enforce-module-boundaries, import/no-relative-packages +import packageJson from '../../package.json'; export default defineConfig({ root: __dirname, cacheDir: '../../node_modules/.vite/packages/twenty-ui', plugins: [ - react(), - nxViteTsPaths(), + react({ jsxImportSource: '@emotion/react' }), + tsconfigPaths(), + svgr(), dts({ entryRoot: 'src', tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'), @@ -43,7 +48,7 @@ export default defineConfig({ }, rollupOptions: { // External packages that should not be bundled into your library. - external: ['react', 'react-dom', 'react/jsx-runtime'], + external: Object.keys(packageJson.dependencies || {}), }, }, }); diff --git a/tsconfig.base.json b/tsconfig.base.json index 7acdc5e09..a31bf19ea 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -13,10 +13,12 @@ "lib": ["es2020", "dom"], "skipLibCheck": true, "skipDefaultLibCheck": true, + "resolveJsonModule": true, "baseUrl": ".", "paths": { "twenty-emails": ["packages/twenty-emails/src/index.ts"], - "twenty-ui": ["packages/twenty-ui/src/index.ts"] + "twenty-ui": ["packages/twenty-ui/src/index.ts"], + "@ui/*": ["packages/twenty-ui/src/*"] } }, "exclude": ["node_modules", "tmp"]