admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: setup twenty-ui absolute path alias (#4732)

Browse Source 
Split from https://github.com/twentyhq/twenty/pull/4518

- Setup `@ui/*` as an internal alias to reference `twenty-ui/src`.
- Configures twenty-front to understand the `@ui/*` alias on development
mode, so twenty-ui can be hot reloaded.
- When building on production mode, twenty-front needs twenty-ui to be
built beforehand (which is automatic with the `dependsOn` option).
- Configures twenty-front to understand the `@ui/*` alias when launching
tests, so there is no need to re-build twenty-ui for tests.

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2024-04-04 15:38:01 +02:00
committed by GitHub
parent 41960f3593
commit c5349291c8
41 changed files with 406 additions and 594 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/activities/files/utils/__tests__/downloadFile.test.ts
View File

@ -28,7 +28,7 @@ describe.skip('downloadFile', () => {
const link = document.querySelector(
'a[href="mock-url"][download="file.pdf"]',
);
console.log(document.body.innerHTML, link);
expect(link).not.toBeNull();
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore

3
packages/twenty-front/src/modules/activities/timeline/components/TimelineCreateButtonGroup.tsx
View File

@ -1,9 +1,10 @@
import { useSetRecoilState } from 'recoil';
import { Button, ButtonGroup } from 'tsup.ui.index';
import { IconCheckbox, IconNotes, IconPaperclip } from 'twenty-ui';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
import { Button } from '@/ui/input/button/components/Button';
import { ButtonGroup } from '@/ui/input/button/components/ButtonGroup';
import { TAB_LIST_COMPONENT_ID } from '@/ui/layout/show-page/components/ShowPageRightContainer';
import { useTabList } from '@/ui/layout/tab/hooks/useTabList';

2
packages/twenty-front/src/modules/command-menu/components/__stories__/CommandMenu.stories.tsx
View File

@ -46,6 +46,7 @@ const meta: Meta<typeof CommandMenu> = {
label: 'Create Task',
type: CommandType.Create,
Icon: IconCheckbox,
// eslint-disable-next-line no-console
onCommandClick: () => console.log('create task click'),
},
{
@ -54,6 +55,7 @@ const meta: Meta<typeof CommandMenu> = {
label: 'Create Note',
type: CommandType.Create,
Icon: IconNotes,
// eslint-disable-next-line no-console
onCommandClick: () => console.log('create note click'),
},
]);

2
packages/twenty-front/src/modules/error-handler/components/GenericErrorFallback.tsx
View File

@ -1,7 +1,7 @@
import { FallbackProps } from 'react-error-boundary';
import { Button } from 'tsup.ui.index';
import { IconRefresh } from 'twenty-ui';
import { Button } from '@/ui/input/button/components/Button';
import AnimatedPlaceholder from '@/ui/layout/animated-placeholder/components/AnimatedPlaceholder';
import {
AnimatedPlaceholderEmptyContainer,

1
packages/twenty-front/src/modules/favorites/hooks/__tests__/useFavorites.test.tsx
View File

@ -146,6 +146,7 @@ describe('useFavorites', () => {
};
const responderProvided: ResponderProvided = {
// eslint-disable-next-line no-console
announce: (message: string) => console.log(message),
};

3
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownOptionSelect.tsx
View File

@ -1,11 +1,12 @@
import { useEffect, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { MenuItem, MenuItemMultiSelect } from 'tsup.ui.index';
import { FieldMetadataItemOption } from '@/object-metadata/types/FieldMetadataItem';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { useOptionsForSelect } from '@/object-record/object-filter-dropdown/hooks/useOptionsForSelect';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemMultiSelect } from '@/ui/navigation/menu-item/components/MenuItemMultiSelect';
import { isDefined } from '~/utils/isDefined';
export const EMPTY_FILTER_VALUE = '';

2
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownRecordRemoveFilterMenuItem.tsx
View File

@ -1,9 +1,9 @@
import { MenuItem } from 'tsup.ui.index';
import { IconFilterOff } from 'twenty-ui';
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
export const ObjectFilterDropdownRecordRemoveFilterMenuItem = () => {
const { emptyFilterButKeepDefinition } = useFilterDropdown();

1
packages/twenty-front/src/modules/object-record/object-filter-dropdown/hooks/__tests__/useFilterDropdown.test.tsx
View File

@ -351,6 +351,7 @@ describe('useFilterDropdown', () => {
});
it('should handle scopeId undefined on initial values', () => {
// eslint-disable-next-line no-console
console.error = jest.fn();
const renderFunction = () => {

2
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnDropdownMenu.tsx
View File

@ -1,10 +1,10 @@
import { useCallback, useContext, useRef } from 'react';
import styled from '@emotion/styled';
import { MenuItem } from 'tsup.ui.index';
import { RecordBoardColumnContext } from '@/object-record/record-board/record-board-column/contexts/RecordBoardColumnContext';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
const StyledMenuContainer = styled.div`

3
packages/twenty-front/src/modules/object-record/record-show/record-detail-section/components/RecordDetailRelationRecordsListItem.tsx
View File

@ -2,7 +2,6 @@ import { useCallback, useContext } from 'react';
import { css } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { LightIconButton, MenuItem } from 'tsup.ui.index';
import {
IconChevronDown,
IconDotsVertical,
@ -32,10 +31,12 @@ import { useSetRecordInStore } from '@/object-record/record-store/hooks/useSetRe
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';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { AnimatedEaseInOut } from '@/ui/utilities/animation/components/AnimatedEaseInOut';
const StyledListItem = styled(RecordDetailRecordsListItem)<{

2
packages/twenty-front/src/modules/settings/accounts/components/SettingsAccountsMessageChannelsListCard.tsx
View File

@ -1,7 +1,6 @@
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { LightIconButton } from 'tsup.ui.index';
import { IconChevronRight } from 'twenty-ui';
import { ConnectedAccount } from '@/accounts/types/ConnectedAccount';
@ -16,6 +15,7 @@ import {
} 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`
align-items: center;

1
packages/twenty-front/src/modules/ui/layout/draggable-list/__stories__/DraggableList.stories.tsx
View File

@ -12,6 +12,7 @@ const meta: Meta<typeof DraggableList> = {
component: DraggableList,
decorators: [ComponentDecorator],
parameters: {
// eslint-disable-next-line no-console
onDragEnd: () => console.log('dragged'),
},
argTypes: {

2
packages/twenty-front/src/modules/ui/navigation/action-bar/components/ActionBarItem.tsx
View File

@ -1,12 +1,12 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { MenuItem } from 'tsup.ui.index';
import { IconChevronDown } from 'twenty-ui';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { ActionBarEntry } from '@/ui/navigation/action-bar/types/ActionBarEntry';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemAccent } from '@/ui/navigation/menu-item/types/MenuItemAccent';
type ActionBarItemProps = {

2
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelect.tsx
View File

@ -1,7 +1,7 @@
import styled from '@emotion/styled';
import { Tag } from 'tsup.ui.index';
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';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';

2
packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemSelectTag.tsx
View File

@ -1,7 +1,7 @@
import { useTheme } from '@emotion/react';
import { Tag } from 'tsup.ui.index';
import { IconCheck } from 'twenty-ui';
import { Tag } from '@/ui/display/tag/components/Tag';
import { ThemeColor } from '@/ui/theme/constants/MainColorNames';
import { StyledMenuItemLeftContent } from '../internals/components/StyledMenuItemBase';

4
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItem.stories.tsx
View File

@ -23,7 +23,9 @@ export const Default: Story = {
LeftIcon: IconBell,
accent: 'default',
iconButtons: [
// eslint-disable-next-line no-console
{ Icon: IconBell, onClick: () => console.log('Clicked') },
// eslint-disable-next-line no-console
{ Icon: IconBell, onClick: () => console.log('Clicked') },
],
},
@ -85,11 +87,13 @@ export const Catalog: CatalogStory<Story, typeof MenuItem> = {
{
Icon: IconBell,
onClick: () =>
// eslint-disable-next-line no-console
console.log('Clicked on first icon button'),
},
{
Icon: IconBell,
onClick: () =>
// eslint-disable-next-line no-console
console.log('Clicked on second icon button'),
},
],

3
packages/twenty-front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemDraggable.stories.tsx
View File

@ -24,7 +24,9 @@ export const Default: Story = {
args: {
LeftIcon: IconBell,
accent: 'default',
// eslint-disable-next-line no-console
iconButtons: [{ Icon: IconMinus, onClick: () => console.log('Clicked') }],
// eslint-disable-next-line no-console
onClick: () => console.log('Clicked'),
text: 'Menu item draggable',
isDragDisabled: false,
@ -86,6 +88,7 @@ export const Catalog: Story = {
{
Icon: IconMinus,
onClick: () =>
// eslint-disable-next-line no-console
console.log('Clicked on minus icon button'),
},
],

15
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerItem.tsx
View File

@ -3,6 +3,7 @@ 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 } from '@/ui/display/icon/types/IconComponent';
import { isNavigationDrawerOpenState } from '@/ui/navigation/states/isNavigationDrawerOpenState';
@ -85,18 +86,6 @@ const StyledItemLabel = styled.div`
white-space: nowrap;
`;
const StyledSoonPill = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.background.transparent.light};
border-radius: 50px;
display: flex;
font-size: ${({ theme }) => theme.font.size.xs};
height: 16px;
justify-content: center;
padding-left: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(2)};
`;
const StyledItemCount = styled.div`
align-items: center;
background-color: ${({ theme }) => theme.color.blue};
@ -168,7 +157,7 @@ export const NavigationDrawerItem = ({
>
{Icon && <Icon size={theme.icon.size.md} stroke={theme.icon.stroke.md} />}
<StyledItemLabel>{label}</StyledItemLabel>
{soon && <StyledSoonPill>Soon</StyledSoonPill>}
{soon && <Pill label="Soon" />}
{!!count && <StyledItemCount>{count}</StyledItemCount>}
{keyboard && (
<StyledKeyBoardShortcut className="keyboard-shortcuts">

1
packages/twenty-front/src/modules/ui/utilities/recoil-scope/scopes-internal/hooks/__tests__/useAvailableScopeId.test.tsx
View File

@ -52,6 +52,7 @@ describe('useAvailableScopeIdOrThrow', () => {
});
it('should throw an error if no scopeId is provided and scopeId is undefined in the context', () => {
// eslint-disable-next-line no-console
console.error = jest.fn();
const renderFunction = () =>