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

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.  <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>
2026-06-18 10:31:29 +02:00
parent 640a8e6ca6
commit 8034c7725f
1580 changed files with 2382 additions and 2404 deletions
@@ -0,0 +1,42 @@
+.status {
+  align-items: center;
+  background: var(--status-background);
+  border-radius: var(--t-border-radius-pill);
+  color: var(--status-text-color);
+  display: inline-flex;
+  font-size: var(--t-font-size-md);
+  font-style: normal;
+  gap: var(--t-spacing-1);
+  height: var(--t-spacing-5);
+  margin: 0;
+  overflow: hidden;
+  padding: 0 var(--t-spacing-2) 0 var(--t-spacing-2);
+
+  &[data-loader-visible] {
+    padding-right: var(--t-spacing-1);
+  }
+
+  &:before {
+    background-color: var(--status-text-color);
+    border-radius: var(--t-border-radius-rounded);
+    content: '';
+    display: block;
+    flex-shrink: 0;
+    height: var(--t-spacing-1);
+    width: var(--t-spacing-1);
+  }
+}
+
+.regular {
+  font-weight: var(--t-font-weight-regular);
+}
+
+.medium {
+  font-weight: var(--t-font-weight-medium);
+}
+
+.content {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
@@ -0,0 +1,7 @@
+declare const classNames: {
+  readonly status: 'status';
+  readonly regular: 'regular';
+  readonly medium: 'medium';
+  readonly content: 'content';
+};
+export default classNames;
@@ -0,0 +1,45 @@
+import { clsx } from 'clsx';
+
+import { Loader } from '@ui/feedback/Loader/Loader';
+import { type ThemeColor } from '@ui/theme';
+import { themeCssVariables } from '@ui/theme-constants';
+import { parseThemeColor } from '@ui/utilities';
+
+import styles from './Status.module.scss';
+
+type StatusProps = {
+  className?: string;
+  color: ThemeColor;
+  isLoaderVisible?: boolean;
+  text: string;
+  onClick?: () => void;
+  weight?: 'regular' | 'medium';
+};
+
+export const Status = ({
+  className,
+  color,
+  isLoaderVisible = false,
+  text,
+  onClick,
+  weight = 'regular',
+}: StatusProps) => {
+  const parsedColor = parseThemeColor(color);
+
+  return (
+    <h3
+      className={clsx(styles.status, styles[weight], className)}
+      onClick={onClick}
+      data-loader-visible={isLoaderVisible || undefined}
+      style={
+        {
+          '--status-background': themeCssVariables.tag.background[parsedColor],
+          '--status-text-color': themeCssVariables.tag.text[parsedColor],
+        } as React.CSSProperties
+      }
+    >
+      <span className={styles.content}>{text}</span>
+      {isLoaderVisible ? <Loader color={color} /> : null}
+    </h3>
+  );
+};
@@ -0,0 +1,71 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import {
+  CatalogDecorator,
+  type CatalogStory,
+  ComponentDecorator,
+} from '@ui/testing';
+import { type ThemeColor, MAIN_COLOR_NAMES } from '@ui/theme';
+import { expect, fn, userEvent, within } from 'storybook/test';
+
+import { Status } from '@ui/data-display/Status/Status';
+
+const meta: Meta<typeof Status> = {
+  title: 'UI/Data Display/Status',
+  component: Status,
+  args: {
+    text: 'Urgent',
+    weight: 'medium',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Status>;
+
+export const Default: Story = {
+  args: {
+    color: 'red',
+    onClick: fn(),
+  },
+  decorators: [ComponentDecorator],
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const status = canvas.getByRole('heading', { level: 3 });
+
+    await userEvent.click(status);
+    expect(args.onClick).toHaveBeenCalled();
+  },
+};
+
+export const WithLongText: Story = {
+  decorators: [ComponentDecorator],
+  args: {
+    color: 'green',
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+  },
+  parameters: {
+    // TODO(a11y): violations inherited from deprecated story; fix during a11y pass
+    a11y: { test: 'todo' },
+    container: { width: 100 },
+  },
+};
+
+export const Catalog: CatalogStory<Story, typeof Status> = {
+  argTypes: {
+    color: { control: false },
+  },
+  parameters: {
+    // TODO(a11y): violations inherited from deprecated story; fix during a11y pass
+    a11y: { test: 'todo' },
+    catalog: {
+      dimensions: [
+        {
+          name: 'colors',
+          values: MAIN_COLOR_NAMES,
+          props: (color: ThemeColor) => ({ color }),
+        },
+      ],
+    },
+  },
+  decorators: [CatalogDecorator],
+};