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.
<!-- This is an auto-generated description by cubic. -->
<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>
<!-- End of auto-generated description by cubic. -->
This commit is contained in:
Raphaël Bosi
@@ -0,0 +1,102 @@
|
||||
// State rules below only assign CSS custom properties; the actual
|
||||
// declarations live on the flat .button class so twenty-front
|
||||
// styled(FloatingButton) overrides keep beating them at (0,1,0) specificity,
|
||||
// exactly like the legacy single Linaria class did.
|
||||
|
||||
.button {
|
||||
align-items: center;
|
||||
backdrop-filter: var(--floating-button-backdrop-filter, none);
|
||||
background: var(--t-background-primary);
|
||||
border: var(--floating-button-border, none);
|
||||
border-radius: var(--floating-button-radius, var(--t-border-radius-sm));
|
||||
box-shadow: var(--floating-button-box-shadow, none);
|
||||
color: var(--floating-button-color, var(--t-font-color-secondary));
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
font-family: var(--t-font-family);
|
||||
font-weight: var(--t-font-weight-regular);
|
||||
gap: var(--t-spacing-1);
|
||||
padding: 0 var(--t-spacing-2);
|
||||
text-decoration: none;
|
||||
transition: background 0.1s ease;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: var(
|
||||
--floating-button-hover-bg,
|
||||
var(--t-background-transparent-lighter)
|
||||
);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background: var(
|
||||
--floating-button-active-bg,
|
||||
var(--t-background-transparent-medium)
|
||||
);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&[data-disabled] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.medium {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
// position only reshapes the radius; standalone keeps the .button default.
|
||||
.button[data-position='left'] {
|
||||
--floating-button-radius: var(--t-border-radius-sm) 0px 0px
|
||||
var(--t-border-radius-sm);
|
||||
}
|
||||
|
||||
.button[data-position='middle'] {
|
||||
--floating-button-radius: 0px;
|
||||
}
|
||||
|
||||
.button[data-position='right'] {
|
||||
--floating-button-radius: 0px var(--t-border-radius-sm)
|
||||
var(--t-border-radius-sm) 0px;
|
||||
}
|
||||
|
||||
.button[data-apply-blur] {
|
||||
--floating-button-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
// box-shadow matrix from the legacy nested ternary: shadow, focus, and
|
||||
// shadow+focus — the combined rule comes last so it wins the cascade.
|
||||
.button[data-apply-shadow] {
|
||||
--floating-button-box-shadow:
|
||||
0px 2px 4px 0px var(--t-background-transparent-light),
|
||||
0px 0px 4px 0px var(--t-background-transparent-medium);
|
||||
}
|
||||
|
||||
// focus is gated by !disabled in the component, like the legacy call-site.
|
||||
.button[data-focus] {
|
||||
--floating-button-border: 1px solid var(--t-color-blue);
|
||||
--floating-button-box-shadow: 0 0 0 3px var(--t-color-blue3);
|
||||
--floating-button-color: var(--t-color-blue);
|
||||
}
|
||||
|
||||
.button[data-apply-shadow][data-focus] {
|
||||
--floating-button-box-shadow:
|
||||
0px 2px 4px 0px var(--t-background-transparent-light),
|
||||
0px 0px 4px 0px var(--t-background-transparent-medium),
|
||||
0 0 0 3px var(--t-color-blue3);
|
||||
}
|
||||
|
||||
// disabled comes last: it beats focus in the legacy color ternary.
|
||||
.button[data-disabled] {
|
||||
--floating-button-color: var(--t-font-color-extra-light);
|
||||
--floating-button-hover-bg: transparent;
|
||||
--floating-button-active-bg: transparent;
|
||||
}
|
||||
@@ -0,0 +1,6 @@
|
||||
declare const classNames: {
|
||||
readonly button: 'button';
|
||||
readonly small: 'small';
|
||||
readonly medium: 'medium';
|
||||
};
|
||||
export default classNames;
|
||||
@@ -0,0 +1,61 @@
|
||||
import { clsx } from 'clsx';
|
||||
import { useContext } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
import { type IconComponent } from '@ui/icon';
|
||||
import { ThemeContext } from '@ui/theme-constants';
|
||||
|
||||
import styles from './FloatingButton.module.scss';
|
||||
|
||||
export type FloatingButtonSize = 'small' | 'medium';
|
||||
export type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
|
||||
|
||||
export type FloatingButtonProps = {
|
||||
className?: string;
|
||||
Icon?: IconComponent;
|
||||
title?: string;
|
||||
size?: FloatingButtonSize;
|
||||
position?: FloatingButtonPosition;
|
||||
applyShadow?: boolean;
|
||||
applyBlur?: boolean;
|
||||
disabled?: boolean;
|
||||
focus?: boolean;
|
||||
to?: string;
|
||||
};
|
||||
|
||||
export const FloatingButton = ({
|
||||
className,
|
||||
Icon,
|
||||
title,
|
||||
size = 'small',
|
||||
position = 'standalone',
|
||||
applyBlur = true,
|
||||
applyShadow = true,
|
||||
disabled = false,
|
||||
focus = false,
|
||||
to,
|
||||
}: FloatingButtonProps) => {
|
||||
const { theme } = useContext(ThemeContext);
|
||||
|
||||
// Replaces the legacy Linaria `as` polymorphism: react-router Link when a
|
||||
// `to` is provided, a native button otherwise. Typed as any to forward all
|
||||
// props untyped, exactly like the legacy `as` prop did.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const ButtonComponent: any = to ? Link : 'button';
|
||||
|
||||
return (
|
||||
<ButtonComponent
|
||||
disabled={disabled}
|
||||
className={clsx(styles.button, styles[size], className)}
|
||||
data-position={position}
|
||||
data-apply-blur={applyBlur || undefined}
|
||||
data-apply-shadow={applyShadow || undefined}
|
||||
data-disabled={disabled || undefined}
|
||||
data-focus={(focus && !disabled) || undefined}
|
||||
to={to}
|
||||
>
|
||||
{Icon && <Icon size={theme.icon.size.sm} />}
|
||||
{title}
|
||||
</ButtonComponent>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,89 @@
|
||||
import { type Meta, type StoryObj } from '@storybook/react-vite';
|
||||
import { IconSearch } from '@ui/icon';
|
||||
import {
|
||||
CatalogDecorator,
|
||||
type CatalogStory,
|
||||
ComponentDecorator,
|
||||
} from '@ui/testing';
|
||||
import {
|
||||
FloatingButton,
|
||||
type FloatingButtonSize,
|
||||
} from '@ui/input/FloatingButton/FloatingButton';
|
||||
|
||||
const meta: Meta<typeof FloatingButton> = {
|
||||
title: 'UI/Input/Button/FloatingButton',
|
||||
component: FloatingButton,
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof FloatingButton>;
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
title: 'Filter',
|
||||
size: 'small',
|
||||
disabled: false,
|
||||
focus: false,
|
||||
applyBlur: true,
|
||||
applyShadow: true,
|
||||
position: 'standalone',
|
||||
Icon: IconSearch,
|
||||
},
|
||||
argTypes: {
|
||||
Icon: { control: false },
|
||||
},
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export const Catalog: CatalogStory<Story, typeof FloatingButton> = {
|
||||
args: { title: 'Filter', Icon: IconSearch },
|
||||
argTypes: {
|
||||
size: { control: false },
|
||||
disabled: { control: false },
|
||||
position: { control: false },
|
||||
focus: { control: false },
|
||||
},
|
||||
parameters: {
|
||||
// TODO(a11y): violations inherited from deprecated story; fix during a11y pass
|
||||
a11y: { test: 'todo' },
|
||||
pseudo: { hover: ['.hover'], active: ['.pressed'] },
|
||||
catalog: {
|
||||
dimensions: [
|
||||
{
|
||||
name: 'sizes',
|
||||
values: ['small', 'medium'] satisfies FloatingButtonSize[],
|
||||
props: (size: FloatingButtonSize) => ({ size }),
|
||||
},
|
||||
{
|
||||
name: 'states',
|
||||
values: [
|
||||
'default',
|
||||
'hover',
|
||||
'pressed',
|
||||
'disabled',
|
||||
'focus',
|
||||
'disabled+focus',
|
||||
],
|
||||
props: (state: string) => {
|
||||
switch (state) {
|
||||
case 'default':
|
||||
return {};
|
||||
case 'hover':
|
||||
case 'pressed':
|
||||
return { className: state };
|
||||
case 'focus':
|
||||
return { focus: true };
|
||||
case 'disabled':
|
||||
return { disabled: true };
|
||||
case 'disabled+focus':
|
||||
return { disabled: true, focus: true };
|
||||
default:
|
||||
return {};
|
||||
}
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
decorators: [CatalogDecorator],
|
||||
};
|
||||
Reference in New Issue
Block a user