Components structure in Twenty codebase - Part 1.3

Inspired by BulletProof React, I applied its codebase architecture concepts to the Twenty codebase.

This article focuses only on the components structure in Twenty codebase.

Prerequisite

1. Components structure in Twenty codebase — Part 1.0

2. Components structure in Twenty codebase — Part 1.1

3. Components structure in Twenty codebase — Part 1.2

In Part 1.2, we reviewed how the routes are configured in the twent-front package. In this article, we review the components structure in the following components:

1. SettingsProfile.tsx

2. SettingsWorkspace.tsx

SettingsProfile.tsx

SettingsProfile is defined in pages/settings/SettingsProfile.tsx. I found the following imported components used in the render method:

import { 
  SubMenuTopBarContainer 
} from '@/ui/layout/page/components/SubMenuTopBarContainer';

import { 
  SettingsPageContainer 
} from '@/settings/components/SettingsPageContainer';

import { 
  WorkspaceMemberPictureUploader 
} from '@/settings/workspace-member/components/WorkspaceMemberPictureUploader';

import { EmailField } from '@/settings/profile/components/EmailField';
import { NameFields } from '@/settings/profile/components/NameFields';
import { 
  SetOrChangePassword 
} from '@/settings/profile/components/SetOrChangePassword';

import { Section } from 'twenty-ui/layout';
import { H2Title, IconShield, Status } from 'twenty-ui/display';
import { UndecoratedLink } from 'twenty-ui/navigation';

There were three components imported from settings/profile/components. Reusable, high level components are defined at package level. For example, twenty-ui related imports.

I think this is a great example demonstrating “place things where they belong”.

SettingsWorkspace.tsx

SettingsWorkspace looks like this.

This component has the following imports at the top:

import { 
  SubMenuTopBarContainer 
} from '@/ui/layout/page/components/SubMenuTopBarContainer';

import { 
  SettingsPageContainer 
} from '@/settings/components/SettingsPageContainer';

import { H2Title } from 'twenty-ui/display';
import { Section } from 'twenty-ui/layout';

import { 
  WorkspaceLogoUploader 
} from '@/settings/workspace/components/WorkspaceLogoUploader';

import { NameField } from '@/settings/workspace/components/NameField';
import { 
  DeleteWorkspace 
} from '@/settings/profile/components/DeleteWorkspace';

settings folder contains the following folders.

And from what I have seen, you colocate components depending on their nature but reuse among these folders as you see fit. For example, DeleteProfile was imported from settings/profile and WorkspaceLogoUploader is imported from settings/workspace.

About me:

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

I spent 200+ hours analyzing Supabase, shadcn/ui, LobeChat. Found the patterns that separate AI slop from production code. Stop refactoring AI slop. Start with proven patterns. Check out production-grade projects at thinkthroo.com

References:

1. twenty/packages/twenty-front/…/SettingsWorkspace.tsx#L13

2. twenty/packages/twenty-front/…/SettingsProfile.tsx#L20