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,62 @@
+// State rules below only assign CSS custom properties; the actual
+// declarations live on the flat .button class so twenty-front
+// styled(MainButton) overrides keep beating them at (0,1,0) specificity,
+// exactly like the legacy single Linaria class did.
+// Cascade order replicates the legacy switches: disabled > variant.
+
+.button {
+  align-items: center;
+  background: var(--main-button-bg);
+  border: 1px solid;
+  border-color: var(--main-button-border-color);
+  border-radius: var(--t-border-radius-md);
+  box-shadow: var(--main-button-box-shadow, var(--t-box-shadow-light));
+  color: var(--main-button-color);
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  font-family: var(--t-font-family);
+  font-weight: var(--t-font-weight-semi-bold);
+  gap: var(--t-spacing-2);
+  justify-content: center;
+  outline: none;
+  padding: var(--t-spacing-2) var(--t-spacing-3);
+  max-height: var(--t-spacing-8);
+  width: var(--main-button-width, auto);
+
+  &:hover {
+    background: var(--main-button-hover-bg);
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+  }
+}
+
+.button[data-variant='primary'] {
+  --main-button-bg: var(--t-background-primary-inverted);
+  --main-button-border-color: var(--t-background-transparent-strong);
+  --main-button-color: var(--t-font-color-inverted);
+  --main-button-hover-bg: var(--t-background-primary-inverted-hover);
+}
+
+.button[data-variant='secondary'] {
+  --main-button-bg: var(--t-background-primary);
+  --main-button-border-color: var(--t-border-color-medium);
+  --main-button-color: var(--t-font-color-primary);
+  --main-button-hover-bg: var(--t-background-tertiary);
+}
+
+.button[data-disabled] {
+  --main-button-bg: var(--t-background-secondary);
+  --main-button-border-color: var(--t-background-transparent-lighter);
+  --main-button-box-shadow: none;
+  --main-button-color: var(--t-font-color-light);
+}
+
+// hover when disabled: the legacy hover switch ignores disabled for
+// secondary (keeps tertiary), while primary falls back to the disabled
+// background.
+.button[data-variant='primary'][data-disabled] {
+  --main-button-hover-bg: var(--t-background-secondary);
+}
@@ -0,0 +1,4 @@
+declare const classNames: {
+  readonly button: 'button';
+};
+export default classNames;
@@ -0,0 +1,58 @@
+import { clsx } from 'clsx';
+import React, { type FunctionComponent, useContext } from 'react';
+
+import { type IconComponent } from '@ui/icon';
+import { ThemeContext } from '@ui/theme-constants';
+
+import styles from './MainButton.module.scss';
+
+export type MainButtonVariant = 'primary' | 'secondary';
+
+type Props = {
+  title: string;
+  fullWidth?: boolean;
+  width?: number;
+  variant?: MainButtonVariant;
+  soon?: boolean;
+} & React.ComponentProps<'button'>;
+
+type MainButtonProps = Props & {
+  Icon?: IconComponent | FunctionComponent<{ size: number }>;
+};
+
+export const MainButton = ({
+  Icon,
+  title,
+  width,
+  fullWidth = false,
+  variant = 'primary',
+  type,
+  onClick,
+  disabled,
+  className,
+}: MainButtonProps) => {
+  const { theme } = useContext(ThemeContext);
+
+  // Replicates the legacy ternary exactly: fullWidth wins over width, and a
+  // falsy width (0) falls back to the 'auto' default.
+  const widthValue = fullWidth ? '100%' : width ? `${width}px` : undefined;
+
+  return (
+    <button
+      className={clsx(styles.button, className)}
+      data-variant={variant}
+      data-disabled={disabled || undefined}
+      disabled={disabled}
+      onClick={onClick}
+      type={type}
+      style={
+        widthValue
+          ? ({ '--main-button-width': widthValue } as React.CSSProperties)
+          : undefined
+      }
+    >
+      {Icon && <Icon size={theme.icon.size.sm} />}
+      {title}
+    </button>
+  );
+};
@@ -0,0 +1,61 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { IconBrandGoogle } from '@ui/icon';
+import { ComponentDecorator } from '@ui/testing';
+import { expect, fn, userEvent, within } from 'storybook/test';
+import { MainButton } from '@ui/input/MainButton/MainButton';
+
+const clickJestFn = fn();
+
+const meta: Meta<typeof MainButton> = {
+  title: 'UI/Input/Button/MainButton',
+  component: MainButton,
+  decorators: [ComponentDecorator],
+  args: { title: 'A primary Button', onClick: clickJestFn },
+};
+
+export default meta;
+type Story = StoryObj<typeof MainButton>;
+
+export const Default: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(0);
+    const button = canvas.getByRole('button');
+    await userEvent.click(button);
+
+    expect(clickJestFn).toHaveBeenCalledTimes(1);
+  },
+};
+
+export const WithIcon: Story = {
+  args: { Icon: IconBrandGoogle },
+};
+
+export const DisabledWithIcon: Story = {
+  args: { ...WithIcon.args, disabled: true },
+};
+
+export const FullWidth: Story = {
+  args: { fullWidth: true },
+};
+
+export const Width: Story = {
+  args: { width: 200 },
+};
+
+export const Secondary: Story = {
+  args: { title: 'A secondary Button', variant: 'secondary' },
+};
+
+export const SecondaryWithIcon: Story = {
+  args: { ...Secondary.args, ...WithIcon.args },
+};
+
+export const SecondaryDisabledWithIcon: Story = {
+  args: { ...SecondaryWithIcon.args, disabled: true },
+};
+
+export const SecondaryFullWidth: Story = {
+  args: { ...Secondary.args, ...FullWidth.args },
+};