Charles Bochet
c53a13417e
## Summary
Eliminates all ~350 `styled(Component)` usages across `twenty-front` and
`twenty-ui` (212 files changed). Each was replaced following these
rules:
- **Margin/layout CSS** (margin, padding, flex, align-self, width) →
wrapped in a `styled.div`/`styled.span` parent container
- **Third-party components** (Link, TextareaAutosize,
ReactPhoneNumberInput, Handle, etc.) → parent container with child CSS
selectors (`> a`, `> textarea`, `> input`, etc.)
- **Intrinsic behavior via existing props** (TableRow
`gridTemplateColumns`, TableCell `color`/`align`) → replaced
`styled(TableRow)` / `styled(TableCell)` with direct prop usage
- **Other visual overrides on twenty-ui components** (Card, Section,
TabList, Button, MenuItem, ScrollWrapper, etc.) → parent wrappers with
`> div` / `> *` child selectors
- **Extending styled.div/span** → merged all CSS into a single
`styled.div`/`styled.span`
Also adds `overflow: hidden` to parent containers wrapping
`ScrollWrapper` so scroll activates correctly with the new wrapper
structure.
### Migration patterns
| Before | After |
|--------|-------|
| `styled(Avatar)` with `margin-right` | `<StyledAvatarContainer><Avatar
/></StyledAvatarContainer>` |
| `styled(Link)` with `text-decoration: none` |
`<StyledLinkContainer><Link /></StyledLinkContainer>` with `> a { ... }`
|
| `styled(TableRow)` with `grid-template-columns` | `<TableRow
gridTemplateColumns="..." />` |
| `styled(TableCell)` with `color` / `align` | `<TableCell color={...}
align="right" />` |
| `styled(Card)` with `margin-top` | `<StyledCardContainer><Card
/></StyledCardContainer>` |
| `styled(TabList)` with `background` |
`<StyledTabListContainer><TabList /></StyledTabListContainer>` with `>
div { ... }` |
| `styled(StyledBase)` extending a `styled.div` | Single merged
`styled.div` with all styles inlined |
82 lines
2.2 KiB
TypeScript
82 lines
2.2 KiB
TypeScript
import {
|
|
formatExpiration,
|
|
isExpired,
|
|
} from '@/settings/developers/utils/formatExpiration';
|
|
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
|
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
|
import { IconChevronRight } from 'twenty-ui/display';
|
|
import { styled } from '@linaria/react';
|
|
import { useContext } from 'react';
|
|
import { ThemeContext } from 'twenty-ui/theme-constants';
|
|
import { type ApiKey } from '~/generated-metadata/graphql';
|
|
|
|
const StyledEllipsisLabel = styled.div`
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
`;
|
|
|
|
type ApiKeyType = Pick<ApiKey, 'id' | 'name' | 'expiresAt' | 'revokedAt'> & {
|
|
role?: { id: string; label: string; icon?: string | null } | null;
|
|
};
|
|
|
|
type SettingsApiKeysFieldItemTableRowProps = {
|
|
apiKey: ApiKeyType;
|
|
to: string;
|
|
};
|
|
|
|
export const SettingsApiKeysFieldItemTableRow = ({
|
|
apiKey,
|
|
to,
|
|
}: SettingsApiKeysFieldItemTableRowProps) => {
|
|
const { theme } = useContext(ThemeContext);
|
|
const formattedExpiration = formatExpiration(apiKey.expiresAt || null);
|
|
|
|
const gridColumns = '5fr 2fr 3fr 1fr';
|
|
|
|
return (
|
|
<TableRow gridAutoColumns={gridColumns} to={to}>
|
|
<TableCell
|
|
color={theme.font.color.primary}
|
|
whiteSpace="nowrap"
|
|
overflow="hidden"
|
|
textOverflow="ellipsis"
|
|
clickable
|
|
>
|
|
<StyledEllipsisLabel>{apiKey.name}</StyledEllipsisLabel>
|
|
</TableCell>
|
|
|
|
<TableCell
|
|
color={theme.font.color.tertiary}
|
|
whiteSpace="nowrap"
|
|
overflow="hidden"
|
|
textOverflow="ellipsis"
|
|
clickable
|
|
>
|
|
<StyledEllipsisLabel>{apiKey.role?.label || '-'}</StyledEllipsisLabel>
|
|
</TableCell>
|
|
|
|
<TableCell
|
|
color={
|
|
isExpired(apiKey.expiresAt || null)
|
|
? theme.font.color.danger
|
|
: theme.font.color.tertiary
|
|
}
|
|
whiteSpace="nowrap"
|
|
overflow="hidden"
|
|
textOverflow="ellipsis"
|
|
clickable
|
|
>
|
|
<StyledEllipsisLabel>{formattedExpiration}</StyledEllipsisLabel>
|
|
</TableCell>
|
|
|
|
<TableCell align="right">
|
|
<IconChevronRight
|
|
size={theme.icon.size.md}
|
|
color={theme.font.color.tertiary}
|
|
/>
|
|
</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|