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

Reorganize twenty-ui into best-practice component domains and per-component folders (#21745)

Browse Source 
Reorganizes `twenty-ui`'s component organization to follow how the best
UI libraries (MUI, Mantine, Base UI, Polaris) structure their source,
now that the package has stabilized.

**Taxonomy** — dissolves the meaningless `components/` junk-drawer and
the 107-file `display/` mega-category. New domains/subpaths:
`data-display`, `typography`, `icon`, `surfaces`; `feedback` and
`layout` absorb the rest (banners/callout/info + placeholders →
feedback; modal/card → surfaces; motion + separators → layout).

**Per-component layout** — every component is now
`<domain>/<ComponentName>/<ComponentName>.tsx` with colocated
styles/stories/types, `internal/` for private helpers and `parts/` for
re-exported compound sub-parts. The redundant inner `/components/` is
gone. `icon` and `json-visualizer` are kept as cohesive subsystems.

**Also:** adds a tree-shakeable root barrel (`import { Button } from
'twenty-ui'`), the generator now owns `individual-entry.ts`, and a real
barrel-leak bug is fixed (private `internals/` parts were leaking into
the public API).

Consumer imports (~1.2k files) and the `twenty-sdk` UI aggregator were
updated by codemod. The change is **export-neutral** except 16
intentionally-removed private internals symbols (all verified
unconsumed). Gates green: typecheck, lint, build, size-limit, storybook.


<!-- This is an auto-generated description by cubic. -->
<a
href="https://cubic.dev/pr/twentyhq/twenty/pull/21745?utm_source=github"
target="_blank" rel="noopener noreferrer"
data-no-image-dialog="true"><picture><source
media="(prefers-color-scheme: dark)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source
media="(prefers-color-scheme: light)"
srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img
alt="Review in cubic"
src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Raphaël Bosi
2026-06-18 10:31:29 +02:00
committed by GitHub
parent 640a8e6ca6
commit 8034c7725f
1580 changed files with 2382 additions and 2404 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/auth/components/Logo.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { styled } from '@linaria/react';
import { isNonEmptyString } from '@sniptt/guards';
import { AppPath } from 'twenty-shared/types';
import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils';
import { Avatar } from 'twenty-ui/display';
import { Avatar } from 'twenty-ui/data-display';
import { UndecoratedLink } from 'twenty-ui/navigation';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { REACT_APP_SERVER_BASE_URL } from '~/config';
packages/twenty-front/src/modules/auth/components/Title.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { styled } from '@linaria/react';
import React from 'react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { AnimatedEaseIn } from 'twenty-ui/utilities';
import { AnimatedEaseIn } from 'twenty-ui/layout';
type TitleProps = React.PropsWithChildren & {
animate?: boolean;
packages/twenty-front/src/modules/auth/components/VerifyEmailEffect.tsx
+1 -1
View File
@@ -8,7 +8,7 @@ import { useVerifyLogin } from '@/auth/hooks/useVerifyLogin';
import { clientConfigApiStatusState } from '@/client-config/states/clientConfigApiStatusState';
import { useIsCurrentLocationOnAWorkspace } from '@/domain-manager/hooks/useIsCurrentLocationOnAWorkspace';
import { useRedirectToWorkspaceDomain } from '@/domain-manager/hooks/useRedirectToWorkspaceDomain';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui/surfaces';
import { useLingui } from '@lingui/react/macro';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import { MemoryRouter, Route, Routes } from 'react-router-dom';
// Mock component that just renders the error state of VerifyEmailEffect directly
// (since normal VerifyEmailEffect has async logic that's hard to test in Storybook)
import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui/surfaces';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
const VerifyEmailEffectErrorState = ({ email = 'user@example.com' }) => {
packages/twenty-front/src/modules/auth/constants/AuthModalConfig.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { type ModalOverlay, type ModalSize } from 'twenty-ui/layout';
import { type ModalOverlay, type ModalSize } from 'twenty-ui/surfaces';
import { AppPath } from 'twenty-shared/types';
type AuthModalConfigType = {
packages/twenty-front/src/modules/auth/sign-in-up/components/EmailVerificationSent.tsx
+2 -7
View File
@@ -10,15 +10,10 @@ import {
import { OnboardingModalCircularIcon } from '@/onboarding/components/OnboardingModalCircularIcon';
import { t } from '@lingui/core/macro';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import {
IconGmail,
IconMail,
IconMailX,
IconMicrosoft,
} from 'twenty-ui/display';
import { IconGmail, IconMail, IconMailX, IconMicrosoft } from 'twenty-ui/icon';
import { MainButton } from 'twenty-ui/input';
import { themeCssVariables } from 'twenty-ui/theme-constants';
import { AnimatedEaseIn } from 'twenty-ui/utilities';
import { AnimatedEaseIn } from 'twenty-ui/layout';
const StyledContainer = styled.div`
align-items: center;
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx
+3 -6
View File
@@ -26,12 +26,9 @@ import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomState
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { isNonEmptyString } from '@sniptt/guards';
import { useContext } from 'react';
import {
Avatar,
HorizontalSeparator,
IconChevronRight,
IconPlus,
} from 'twenty-ui/display';
import { Avatar } from 'twenty-ui/data-display';
import { IconChevronRight, IconPlus } from 'twenty-ui/icon';
import { HorizontalSeparator } from 'twenty-ui/layout';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
import {
type AvailableWorkspace,
packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ import { workspaceAuthBypassProvidersState } from '@/workspace/states/workspaceA
import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
import { Trans } from '@lingui/react/macro';
import { FormProvider } from 'react-hook-form';
import { HorizontalSeparator } from 'twenty-ui/display';
import { HorizontalSeparator } from 'twenty-ui/layout';
import { ClickToActionLink } from 'twenty-ui/navigation';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { type Meta, type StoryObj } from '@storybook/react-vite';
import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerificationSent';
import { ModalContent } from 'twenty-ui/layout';
import { ModalContent } from 'twenty-ui/surfaces';
import { ComponentDecorator } from 'twenty-ui/testing';
import { SnackBarDecorator } from '~/testing/decorators/SnackBarDecorator';
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/LastUsedPill.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { styled } from '@linaria/react';
import { useLingui } from '@lingui/react/macro';
import { Pill } from 'twenty-ui/components';
import { Pill } from 'twenty-ui/data-display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledPillContainer = styled.span`
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpPasswordField.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ import { useLingui } from '@lingui/react/macro';
import { motion } from 'framer-motion';
import { useContext } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { StyledText } from 'twenty-ui/display';
import { StyledText } from 'twenty-ui/typography';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledFullWidthMotionDiv = styled(motion.div)`
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/gue
import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState';
import React from 'react';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator } from 'twenty-ui/display';
import { HorizontalSeparator } from 'twenty-ui/layout';
import { MainButton } from 'twenty-ui/input';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpTwoFactorAuthenticationProvision.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import { styled } from '@linaria/react';
import { Trans, useLingui } from '@lingui/react/macro';
import QRCode from 'react-qr-code';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { IconCopy } from 'twenty-ui/display';
import { IconCopy } from 'twenty-ui/icon';
import { Loader } from 'twenty-ui/feedback';
import { MainButton } from 'twenty-ui/input';
import { useContext } from 'react';
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithGoogle.tsx
+2 -1
View File
@@ -9,7 +9,8 @@ import { AuthenticatedMethod } from '@/auth/types/AuthenticatedMethod.enum';
import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
import { useLingui } from '@lingui/react/macro';
import { memo, useContext } from 'react';
import { HorizontalSeparator, IconGoogle } from 'twenty-ui/display';
import { IconGoogle } from 'twenty-ui/icon';
import { HorizontalSeparator } from 'twenty-ui/layout';
import { MainButton } from 'twenty-ui/input';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithMicrosoft.tsx
+2 -1
View File
@@ -9,7 +9,8 @@ import { AuthenticatedMethod } from '@/auth/types/AuthenticatedMethod.enum';
import { type SocialSSOSignInUpActionType } from '@/auth/types/socialSSOSignInUp.type';
import { useLingui } from '@lingui/react/macro';
import { useContext } from 'react';
import { HorizontalSeparator, IconMicrosoft } from 'twenty-ui/display';
import { IconMicrosoft } from 'twenty-ui/icon';
import { HorizontalSeparator } from 'twenty-ui/layout';
import { MainButton } from 'twenty-ui/input';
import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue';
packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpWithSSO.tsx
+2 -1
View File
@@ -12,7 +12,8 @@ import { useAtomState } from '@/ui/utilities/state/jotai/hooks/useAtomState';
import { useSetAtomState } from '@/ui/utilities/state/jotai/hooks/useSetAtomState';
import { useLingui } from '@lingui/react/macro';
import { isDefined } from 'twenty-shared/utils';
import { HorizontalSeparator, IconLock } from 'twenty-ui/display';
import { IconLock } from 'twenty-ui/icon';
import { HorizontalSeparator } from 'twenty-ui/layout';
import { MainButton } from 'twenty-ui/input';
import { LastUsedPill } from './LastUsedPill';
import { StyledSSOButtonContainer } from './SignInUpSSOButtonStyles';