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

[REFACTOR] Twenty UI multi barrel (#11301)

Browse Source 
# Introduction
closes https://github.com/twentyhq/core-team-issues/issues/591
Same than for `twenty-shared` made in
https://github.com/twentyhq/twenty/pull/11083.

## TODO
- [x] Manual migrate twenty-website twenty-ui imports

## What's next:
- Generate barrel and migration script factorization within own package
+ tests
- Refactoring using preconstruct ? TimeBox
- Lint circular dependencies
- Lint import from barrel and forbid them

### Preconstruct
We need custom rollup plugins addition, but preconstruct does not expose
its rollup configuration. It might be possible to handle this using the
babel overrides. But was a big tunnel.
We could give it a try afterwards ! ( allowing cjs interop and stuff
like that )
Stuck to vite lib app

Closed related PRs:
- https://github.com/twentyhq/twenty/pull/11294
- https://github.com/twentyhq/twenty/pull/11203
This commit is contained in:
Paul Rastoin
2025-04-03 11:47:55 +02:00
committed by GitHub
parent 8c9fcfe5a4
commit 4a4e65fe4a
1009 changed files with 5757 additions and 2828 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/MobileBreadcrumb.tsx
View File

@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { isNonEmptyString } from '@sniptt/guards';
import { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { IconChevronLeft } from 'twenty-ui';
import { IconChevronLeft } from 'twenty-ui/display';
export type MobileBreadcrumbProps = {
className?: string;

2
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
View File

@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { Breadcrumb } from '../Breadcrumb';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof Breadcrumb> = {
title: 'UI/Navigation/Breadcrumb/Breadcrumb',

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

@ -7,13 +7,14 @@ import {
IconChevronRight,
IconComponent,
IconDotsVertical,
LightIconButton,
LightIconButtonProps,
} from 'twenty-ui/display';
import { LightIconButton, LightIconButtonProps } from 'twenty-ui/input';
import {
MenuItemAccent,
MenuItemLeftContent,
StyledHoverableMenuItemBase,
StyledMenuItemLeftContent,
} from 'twenty-ui';
} from 'twenty-ui/navigation';
export type MenuItemIconButton = {
Wrapper?: FunctionComponent<{ iconButton: ReactElement }>;

10
packages/twenty-front/src/modules/ui/navigation/navigation-bar/components/__stories__/NavigationBar.stories.tsx
View File

@ -1,14 +1,14 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { ComponentDecorator } from 'twenty-ui/testing';
import {
ComponentDecorator,
IconCheckbox,
IconList,
IconSearch,
IconSettings,
NavigationBar,
} from 'twenty-ui';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
} from 'twenty-ui/display';
import { NavigationBar } from 'twenty-ui/navigation';
const meta: Meta<typeof NavigationBar> = {
title: 'UI/Navigation/NavigationBar/NavigationBar',

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownClickableComponent.tsx
View File

@ -1,4 +1,3 @@
import { Avatar } from 'twenty-ui';
import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
import { NavigationDrawerAnimatedCollapseWrapper } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerAnimatedCollapseWrapper';
import {
@ -10,6 +9,7 @@ import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { useRecoilValue } from 'recoil';
import { useTheme } from '@emotion/react';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { Avatar } from 'twenty-ui/display';
export const MultiWorkspaceDropdownClickableComponent = () => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);

26
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownDefaultComponents.tsx
View File

@ -1,15 +1,3 @@
import {
Avatar,
IconDotsVertical,
IconLogout,
IconPlus,
IconSwitchHorizontal,
IconUserPlus,
LightIconButton,
MenuItem,
MenuItemSelectAvatar,
UndecoratedLink,
} from 'twenty-ui';
import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
@ -37,6 +25,20 @@ import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
import styled from '@emotion/styled';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import {
Avatar,
IconDotsVertical,
IconLogout,
IconPlus,
IconSwitchHorizontal,
IconUserPlus,
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
import {
MenuItem,
MenuItemSelectAvatar,
UndecoratedLink,
} from 'twenty-ui/navigation';
const StyledDescription = styled.div`
color: ${({ theme }) => theme.font.color.light};

3
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownThemesComponents.tsx
View File

@ -1,11 +1,12 @@
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { IconCheck, IconChevronLeft, MenuItem } from 'twenty-ui';
import { useLingui } from '@lingui/react/macro';
import { multiWorkspaceDropdownState } from '@/ui/navigation/navigation-drawer/states/multiWorkspaceDropdownState';
import { useSetRecoilState } from 'recoil';
import { useColorScheme } from '@/ui/theme/hooks/useColorScheme';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { IconCheck, IconChevronLeft } from 'twenty-ui/display';
import { MenuItem } from 'twenty-ui/navigation';
export const MultiWorkspaceDropdownThemesComponents = () => {
const { t } = useLingui();

8
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspaceDropdownWorkspacesListComponents.tsx
View File

@ -1,10 +1,4 @@
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import {
Avatar,
IconChevronLeft,
MenuItemSelectAvatar,
UndecoratedLink,
} from 'twenty-ui';
import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl';
@ -19,6 +13,8 @@ import { useState } from 'react';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuHeaderLeftComponent } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderLeftComponent';
import { Avatar, IconChevronLeft } from 'twenty-ui/display';
import { MenuItemSelectAvatar, UndecoratedLink } from 'twenty-ui/navigation';
export const MultiWorkspaceDropdownWorkspacesListComponents = () => {
const currentWorkspace = useRecoilValue(currentWorkspaceState);

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/MultiWorkspaceDropdown/internal/MultiWorkspacesDropdownStyles.tsx
View File

@ -1,5 +1,5 @@
import { IconChevronDown } from 'twenty-ui';
import styled from '@emotion/styled';
import { IconChevronDown } from 'twenty-ui/display';
export const StyledContainer = styled.div<{
isNavigationDrawerExpanded: boolean;

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawer.tsx
View File

@ -3,7 +3,6 @@ import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { ReactNode, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { NAV_DRAWER_WIDTHS } from '@/ui/navigation/navigation-drawer/constants/NavDrawerWidths';
@ -13,6 +12,7 @@ import { NavigationDrawerSection } from '@/ui/navigation/navigation-drawer/compo
import { isNavigationDrawerExpandedState } from '../../states/isNavigationDrawerExpanded';
import { NavigationDrawerBackButton } from './NavigationDrawerBackButton';
import { NavigationDrawerHeader } from './NavigationDrawerHeader';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
export type NavigationDrawerProps = {
children: ReactNode;

3
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerBackButton.tsx
View File

@ -1,13 +1,14 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { IconX, UndecoratedLink } from 'twenty-ui';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { navigationDrawerExpandedMemorizedState } from '@/ui/navigation/states/navigationDrawerExpandedMemorizedState';
import { navigationMemorizedUrlState } from '@/ui/navigation/states/navigationMemorizedUrlState';
import { useIsWorkspaceActivationStatusEqualsTo } from '@/workspace/hooks/useIsWorkspaceActivationStatusEqualsTo';
import { WorkspaceActivationStatus } from 'twenty-shared/workspace';
import { IconX } from 'twenty-ui/display';
import { UndecoratedLink } from 'twenty-ui/navigation';
type NavigationDrawerBackButtonProps = {
title: string;

4
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerCollapseButton.tsx
View File

@ -4,8 +4,8 @@ import { useSetRecoilState } from 'recoil';
import {
IconLayoutSidebarLeftCollapse,
IconLayoutSidebarRightCollapse,
LightIconButton,
} from 'twenty-ui';
} from 'twenty-ui/display';
import { LightIconButton } from 'twenty-ui/input';
const StyledCollapseButton = styled.div`
align-items: center;

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerInput.tsx
View File

@ -4,9 +4,9 @@ import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useLis
import styled from '@emotion/styled';
import { FocusEvent, useRef } from 'react';
import { Key } from 'ts-key-enum';
import { IconComponent, TablerIconsProps } from 'twenty-ui';
import { useHotkeyScopeOnMount } from '~/hooks/useHotkeyScopeOnMount';
import { isDefined } from 'twenty-shared/utils';
import { IconComponent, TablerIconsProps } from 'twenty-ui/display';
type NavigationDrawerInputProps = {
className?: string;

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

@ -11,14 +11,10 @@ import styled from '@emotion/styled';
import { ReactNode } from 'react';
import { Link } from 'react-router-dom';
import { useRecoilState } from 'recoil';
import {
IconComponent,
Label,
MOBILE_VIEWPORT,
Pill,
TablerIconsProps,
} from 'twenty-ui';
import { capitalize, isDefined } from 'twenty-shared/utils';
import { IconComponent, Label, TablerIconsProps } from 'twenty-ui/display';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
import { Pill } from 'twenty-ui/components';
const DEFAULT_INDENTATION_LEVEL = 1;

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSection.tsx
View File

@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { useIsMobile } from 'twenty-ui';
import { useIsMobile } from 'twenty-ui/utilities';
const StyledSection = styled.div`
width: 100%;

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitle.tsx
View File

@ -7,8 +7,8 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import React from 'react';
import { useRecoilValue } from 'recoil';
import { Label } from 'twenty-ui';
import { isDefined } from 'twenty-shared/utils';
import { Label } from 'twenty-ui/display';
const StyledTitle = styled.div`
align-items: center;

37
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawer.stories.tsx
View File

@ -3,24 +3,6 @@ import { Meta, StoryObj } from '@storybook/react';
import { within } from '@storybook/test';
import { useEffect } from 'react';
import { useSetRecoilState } from 'recoil';
import {
GithubVersionLink,
IconAt,
IconBell,
IconBuildingSkyscraper,
IconCalendarEvent,
IconCheckbox,
IconColorSwatch,
IconMail,
IconSearch,
IconServer,
IconSettings,
IconTargetArrow,
IconUser,
IconUserCircle,
IconUsers,
getOsControlSymbol,
} from 'twenty-ui';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
@ -43,6 +25,25 @@ import { NavigationDrawerItem } from '../NavigationDrawerItem';
import { NavigationDrawerItemGroup } from '../NavigationDrawerItemGroup';
import { NavigationDrawerSection } from '../NavigationDrawerSection';
import { NavigationDrawerSectionTitle } from '../NavigationDrawerSectionTitle';
import { GithubVersionLink } from 'twenty-ui/navigation';
import {
IconAt,
IconBell,
IconBuildingSkyscraper,
IconCalendarEvent,
IconCheckbox,
IconColorSwatch,
IconMail,
IconSearch,
IconServer,
IconSettings,
IconTargetArrow,
IconUser,
IconUserCircle,
IconUsers,
} from 'twenty-ui/display';
import { getOsControlSymbol } from 'twenty-ui/utilities';
const meta: Meta<typeof NavigationDrawer> = {
title: 'UI/Navigation/NavigationDrawer/NavigationDrawer',
component: NavigationDrawer,

2
packages/twenty-front/src/modules/ui/navigation/navigation-drawer/components/__stories__/NavigationDrawerCollapseButton.stories.tsx
View File

@ -1,7 +1,7 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { NavigationDrawerCollapseButton } from '../NavigationDrawerCollapseButton';
import { ComponentDecorator } from 'twenty-ui/testing';
const meta: Meta<typeof NavigationDrawerCollapseButton> = {
title: 'UI/Navigation/NavigationDrawer/NavigationDrawerCollapseButton',

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

@ -1,12 +1,12 @@
import styled from '@emotion/styled';
import { Meta, StoryObj } from '@storybook/react';
import { CatalogDecorator, CatalogStory, IconSearch } from 'twenty-ui';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { MemoryRouterDecorator } from '~/testing/decorators/MemoryRouterDecorator';
import { getOsControlSymbol } from '@ui/utilities/device/getOsControlSymbol';
import { NavigationDrawerItem } from '../NavigationDrawerItem';
import { CatalogDecorator, CatalogStory } from 'twenty-ui/testing';
import { IconSearch } from 'twenty-ui/display';
import { getOsControlSymbol } from 'twenty-ui/utilities';
const StyledContainer = styled.div`
display: flex;

2
packages/twenty-front/src/modules/ui/navigation/states/isNavigationDrawerExpanded.ts
View File

@ -1,5 +1,5 @@
import { atom } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
const isMobile = window.innerWidth <= MOBILE_VIEWPORT;

2
packages/twenty-front/src/modules/ui/navigation/states/navigationDrawerExpandedMemorizedState.ts
View File

@ -1,5 +1,5 @@
import { atom } from 'recoil';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
const isMobile = window.innerWidth <= MOBILE_VIEWPORT;

3
packages/twenty-front/src/modules/ui/navigation/states/navigationMemorizedUrlState.ts
View File

@ -1,5 +1,4 @@
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export const navigationMemorizedUrlState = createState<string>({
key: 'navigationMemorizedUrlState',
defaultValue: '/',

3
packages/twenty-front/src/modules/ui/navigation/step-bar/components/Step.tsx
View File

@ -1,9 +1,10 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { AnimatedCheckmark, MOBILE_VIEWPORT } from 'twenty-ui';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { AnimatedCheckmark } from 'twenty-ui/display';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
const StyledContainer = styled.div<{ isLast: boolean }>`
align-items: center;

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

@ -1,10 +1,10 @@
import React from 'react';
import styled from '@emotion/styled';
import { MOBILE_VIEWPORT } from 'twenty-ui';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { Step, StepProps } from './Step';
import { MOBILE_VIEWPORT } from 'twenty-ui/theme';
const StyledContainer = styled.div`
display: flex;

3
packages/twenty-front/src/modules/ui/navigation/step-bar/states/stepBarInternalState.ts
View File

@ -1,5 +1,4 @@
import { createState } from '@ui/utilities/state/utils/createState';
import { createState } from 'twenty-ui/utilities';
export type StepsState = {
activeStep: number;
};