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

3
packages/twenty-website/package.json
View File

@ -21,6 +21,7 @@
"@nivo/calendar": "^0.87.0",
"gray-matter": "^4.0.3",
"next-runtime-env": "^3.2.2",
"postgres": "^3.4.3"
"postgres": "^3.4.3",
"twenty-ui": "workspace:*"
}
}

2
packages/twenty-website/src/content/developers/frontend-development/best-practices-front.mdx
View File

@ -299,7 +299,7 @@ import {
```tsx
// ✅ Good, utilises the designated aliases
import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
import { ComponentDecorator } from 'twenty-ui';
import { ComponentDecorator } from 'twenty-ui/testing';
```
## Schema Validation

2
packages/twenty-website/src/content/twenty-ui/display/app-tooltip.mdx
View File

@ -60,7 +60,7 @@ Handles overflowing text and displays a tooltip when the text overflows.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { OverflowingTextWithTooltip } from 'twenty-ui';
<SandpackEditor content={`import { OverflowingTextWithTooltip } from 'twenty-ui/display';
export const MyComponent = () => {
const crmTaskDescription =

4
packages/twenty-website/src/content/twenty-ui/display/checkmark.mdx
View File

@ -9,7 +9,7 @@ Represents a successful or completed action.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { Checkmark } from 'twenty-ui';
<SandpackEditor content={`import { Checkmark } from 'twenty-ui/display';
export const MyComponent = () => {
return <Checkmark />;
@ -34,7 +34,7 @@ Represents a checkmark icon with the added feature of animation.
<ArticleTab>
<SandpackEditor content={`import { AnimatedCheckmark } from 'twenty-ui';
<SandpackEditor content={`import { AnimatedCheckmark } from 'twenty-ui/display';
export const MyComponent = () => {
return (

11
packages/twenty-website/src/content/twenty-ui/display/chip.mdx
View File

@ -10,7 +10,7 @@ A visual element that you can use as a clickable or non-clickable container with
<ArticleTab>
<SandpackEditor content={`import { Chip } from 'twenty-ui';
<SandpackEditor content={`import { Chip } from 'twenty-ui/components';
export const MyComponent = () => {
return (
@ -50,7 +50,7 @@ export const MyComponent = () => {
### Transparent Disabled Chip
<SandpackEditor content={`import { Chip } from 'twenty-ui';
<SandpackEditor content={`import { Chip } from 'twenty-ui/components';
export const MyComponent = () => {
return (
@ -73,7 +73,7 @@ export const MyComponent = () => {
### Disabled Chip with Tooltip
<SandpackEditor content={`import { Chip } from "twenty-ui";
<SandpackEditor content={`import { Chip } from "twenty-ui/components";
export const MyComponent = () => {
return (
@ -102,12 +102,13 @@ A Chip-like element to display information about an entity.
<ArticleTab>
<SandpackEditor content={`import { BrowserRouter as Router } from 'react-router-dom';
import { EntityChip, IconTwentyStar } from 'twenty-ui';
import { IconTwentyStar } from 'twenty-ui/display';
import { Chip } from 'twenty-ui/components';
export const MyComponent = () => {
return (
<Router>
<EntityChip
<Chip
linkToEntity="/entity-link"
entityId="entityTest"
name="Entity name"

2
packages/twenty-website/src/content/twenty-ui/display/icons.mdx
View File

@ -60,7 +60,7 @@ Displays an address book icon.
<ArticleTab>
<SandpackEditor content={`import { IconAddressBook } from 'twenty-ui';
<SandpackEditor content={`import { IconAddressBook } from 'twenty-ui/display';
export const MyComponent = () => {
return <IconAddressBook size={24} stroke={2} />;

2
packages/twenty-website/src/content/twenty-ui/input/checkbox.mdx
View File

@ -9,7 +9,7 @@ Used when a user needs to select multiple values from several options.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { Checkbox } from "twenty-ui";
<SandpackEditor content={`import { Checkbox } from "twenty-ui/display";
export const MyComponent = () => {
return (

4
packages/twenty-website/src/content/twenty-ui/input/color-scheme.mdx
View File

@ -11,7 +11,7 @@ Represents different color schemes and is specially tailored for light and dark
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { ColorSchemeCard } from "twenty-ui";
<SandpackEditor content={`import { ColorSchemeCard } from "twenty-ui/display";
export const MyComponent = () => {
return (
@ -43,7 +43,7 @@ Allows users to choose between different color schemes.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { ColorSchemePicker } from "twenty-ui";
<SandpackEditor content={`import { ColorSchemePicker } from "twenty-ui/display";
export const MyComponent = () => {
return <ColorSchemePicker

4
packages/twenty-website/src/content/twenty-ui/input/radio.mdx
View File

@ -9,7 +9,7 @@ Used when users may only choose one option from a series of options.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { Radio } from "twenty-ui";
<SandpackEditor content={`import { Radio } from "twenty-ui/display";
export const MyComponent = () => {
@ -65,7 +65,7 @@ Groups together related radio buttons.
<ArticleTab>
<SandpackEditor content={`import React, { useState } from "react";
import { Radio, RadioGroup } from "twenty-ui";
import { Radio, RadioGroup } from "twenty-ui/display";
export const MyComponent = () => {

2
packages/twenty-website/src/content/twenty-ui/input/select.mdx
View File

@ -10,7 +10,7 @@ Allows users to pick a value from a list of predefined options.
<ArticleTab>
<SandpackEditor content={`import { RecoilRoot } from 'recoil';
import { IconTwentyStar } from 'twenty-ui';
import { IconTwentyStar } from 'twenty-ui/display';
import { Select } from '@/ui/input/components/Select';

2
packages/twenty-website/src/content/twenty-ui/input/toggle.mdx
View File

@ -7,7 +7,7 @@ image: /images/user-guide/table-views/table.png
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { Toggle } from "twenty-ui";
<SandpackEditor content={`import { Toggle } from "twenty-ui/input";
export const MyComponent = () => {
return (

8
packages/twenty-website/src/content/twenty-ui/navigation/links.mdx
View File

@ -13,7 +13,7 @@ A stylized link component for displaying contact information.
<SandpackEditor content={`import { BrowserRouter as Router } from 'react-router-dom';
import { ContactLink } from 'twenty-ui';
import { ContactLink } from 'twenty-ui/navigation';
export const MyComponent = () => {
const handleLinkClick = (event) => {
@ -56,7 +56,7 @@ A stylized link component for displaying links.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { RawLink } from "twenty-ui";
<SandpackEditor content={`import { RawLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
@ -97,7 +97,7 @@ A rounded-styled link with a Chip component for links.
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { RoundedLink } from "twenty-ui";
<SandpackEditor content={`import { RoundedLink } from "/navigation";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {
@ -134,7 +134,7 @@ Stylized social links, with support for various social link types, such as URLs,
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { SocialLink } from "twenty-ui";
<SandpackEditor content={`import { SocialLink } from "twenty-ui/navigation";
import { BrowserRouter as Router } from "react-router-dom";
export const MyComponent = () => {

20
packages/twenty-website/src/content/twenty-ui/navigation/menu-item.mdx
View File

@ -11,7 +11,7 @@ A versatile menu item designed to be used in a menu or navigation list.
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItem } from "twenty-ui";
import { MenuItem } from "twenty-ui/display";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
@ -68,7 +68,7 @@ A command-style menu item within a menu to indicate keyboard shortcuts.
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemCommand } from "twenty-ui";
import { MenuItemCommand } from "twenty-ui/display";
export const MyComponent = () => {
const handleCommandClick = () => {
@ -114,7 +114,7 @@ A draggable menu item component designed to be used in a menu or list where item
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { IconAlertCircle } from "@tabler/icons-react";
import { MenuItemDraggable } from "twenty-ui";
import { MenuItemDraggable } from "twenty-ui/display";
export const MyComponent = () => {
const handleMenuItemClick = (event) => {
@ -162,7 +162,7 @@ Provides a way to implement multi-select functionality with an associated checkb
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemMultiSelect } from "twenty-ui";
import { MenuItemMultiSelect } from "twenty-ui/display";
export const MyComponent = () => {
@ -199,7 +199,7 @@ A multi-select menu item with an avatar, a checkbox for selection, and textual c
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { MenuItemMultiSelectAvatar } from "twenty-ui";
<SandpackEditor content={`import { MenuItemMultiSelectAvatar } from "twenty-ui/display";
export const MyComponent = () => {
const imageUrl =
@ -239,7 +239,7 @@ A menu item featuring an optional left icon, textual content, and a right-chevro
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemNavigate } from "twenty-ui";
import { MenuItemNavigate } from "twenty-ui/display";
export const MyComponent = () => {
const handleNavigation = () => {
@ -279,7 +279,7 @@ A selectable menu item, featuring optional left content (icon and text) and an i
<ArticleTab>
<SandpackEditor content={`import { IconBell } from "@tabler/icons-react";
import { MenuItemSelect } from "twenty-ui";
import { MenuItemSelect } from "twenty-ui/display";
export const MyComponent = () => {
const handleSelection = () => {
@ -323,7 +323,7 @@ A selectable menu item with an avatar, featuring optional left content (avatar a
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { MenuItemSelectAvatar } from "twenty-ui";
<SandpackEditor content={`import { MenuItemSelectAvatar } from "twenty-ui/display";
export const MyComponent = () => {
const imageUrl =
@ -374,7 +374,7 @@ A selectable menu item with a color sample for scenarios where you want users to
<ArticleTabs label1="Usage" label2="Props">
<ArticleTab>
<SandpackEditor content={`import { MenuItemSelectColor } from "twenty-ui";
<SandpackEditor content={`import { MenuItemSelectColor } from "twenty-ui/display";
export const MyComponent = () => {
const handleSelection = () => {
@ -420,7 +420,7 @@ A menu item with an associated toggle switch to allow users to enable or disable
<SandpackEditor content={`import { IconBell } from '@tabler/icons-react';
import { MenuItemToggle } from 'twenty-ui';
import { MenuItemToggle } from 'twenty-ui/display';
export const MyComponent = () => {

2
packages/twenty-website/src/content/twenty-ui/progress-bar.mdx
View File

@ -10,7 +10,7 @@ Indicates progress or countdown and moves from right to left.
<ArticleTab>
<SandpackEditor content={`import { ProgressBar } from "twenty-ui";
<SandpackEditor content={`import { ProgressBar } from "twenty-ui/feedback";
export const MyComponent = () => {
return (