Extract Twenty-UI into its own separate package

[FelixMalfait]

As of today, the UI components are nested within twenty-front. We want to isolate them into a separate package. That way it can be shared with other frontends (e.g. Chrome Extension) and re-used by the community.

[charlesBochet]

@mabdullahabaid this one is for you!

[mabdullahabaid]

@charlesBochet here’s the update from our last conversation.

• I went over all the SOLID principles and got a little deeper into Dependency Inversion Principle like you suggested - it’s the idea of depending on abstractions instead of concrete implementations within our business logic. Since Dependency Injection is a way to implement Dependency Inversion, I would say the complete backend application implements Dependency Inversion. However, the IntegrationsModule is specifically something where all these abstractions are implemented by the development team and not the framework itself - UserResolver does not know if FileUploadService uses S3 or some other storage, it simply needs to pass in data to match an interface. In case of the Frontend (React), I found this video extremely intuitive on the topic - yet to explore twenty-front in enough depth though.

• I read about the core concepts of NX and have a good understanding of Package-based Monorepo, Integrated Monorepo and Standalone Applications supported by the build system. In the case of Twenty, you are using a mix of Package-based Monorepo and Integrated Monorepo. Due to this reason, you have to define the workspaces property in the root-level package.json and a paths property inside tsconfig.base.json. Using this approach, you can import twenty-emails using the standard TypeScript import syntax, but did not need to change your build configuration for each package when migrating to NX.

• On the topic of exploring other UI libraries to understand how they have implemented interfaces, I started things off, but have not gotten into enough depth on this topic just yet. Will spend the coming weekend on building this depth and update you once I get there. I am planning to start building a component sometime next week to have something concrete to get your feedback. Might have to dispose off the component completely, but I think it would help us build more clarity about the structure we want. Then, we can move towards timeboxing this issue.

Let me know your thoughts and feel free to flag any inconsistencies in my conceptual understanding.

[charlesBochet]

@mabdullahabaid sorry for the late answer. Let's:

• create a twenty-ui package under our packages/ folder,
• extract one component (for example Button) and remove it from twenty-front
• setup nx so twenty-front can use it
• setup storybook to document the API
• use the component in twenty-docs in the UI section to document it too

[FelixMalfait]

Closing in favor of #5930 since both issues seem very similar