Charles Bochet
eda905f271
## Summary This PR improves Linaria/WYW pre-build speed and continues the migration of `twenty-ui` components away from runtime `ThemeContext` reads toward static CSS variables and theme constants. ### Linaria/WYW profiling plugin improvements (`twenty-shared`) - **Babel JIT warmup**: added a `buildStart` warmup step that triggers WYW's Babel JIT compilation before the real build starts, so the first real file doesn't pay the cold-start penalty - **`configResolved` hook**: detects dev vs prod mode and resolves the correct warmup file path relative to `config.root` - **Dev-only per-file logging**: slow file warnings are now gated behind `isDevMode`, keeping production/CI build output clean - **`closeBundle` summary**: moved the final top-slow-files report to `closeBundle` for accurate end-of-build reporting - **Removed noisy progress interval logging** in favor of the warmup log + final summary ### Migration from `ThemeContext` to static CSS variables / constants Across `twenty-ui`, replaced runtime `useTheme()` reads with: - `themeCssVariables` CSS custom properties (colors, spacing) - Hard-coded design-system constants (`ICON.size.md` → `16`, `ICON.stroke.sm` → `1.6`) so components no longer need a React context at render time — enabling Linaria static extraction **Components migrated:** - `Button`, `AnimatedButton`, `LightButton`, `LightIconButton`, `AnimatedLightIconButton`, `ButtonIcon`, `ButtonSoon` - `ProgressBar` (Framer Motion width animation → CSS `transition`) - `Info`, `HorizontalSeparator`, `LinkChip` - `MenuPicker`, `MenuItemLeftContent`, `MenuItemIconWithGripSwap`, `NavigationBarItem` - `JsonArrow`, `JsonNestedNode` - `ModalHeader` ### Other - Added `aria-valuenow` to `ProgressBar` for accessibility - `VisibilityHidden` component updated to inline accessibility styles
57 lines
1.5 KiB
TypeScript
57 lines
1.5 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { type ReactNode } from 'react';
|
|
|
|
import { SettingsItemTypeTag } from '@/settings/components/SettingsItemTypeTag';
|
|
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
|
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
|
import { useIcons, OverflowingTextWithTooltip } from 'twenty-ui/display';
|
|
import { ICON_SIZES, themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
import { type Skill } from '~/generated-metadata/graphql';
|
|
|
|
export type SettingsSkillTableRowProps = {
|
|
skill: Skill;
|
|
action?: ReactNode;
|
|
link?: string;
|
|
};
|
|
|
|
const StyledIconContainer = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
`;
|
|
|
|
export const SettingsSkillTableRow = ({
|
|
skill,
|
|
action,
|
|
link,
|
|
}: SettingsSkillTableRowProps) => {
|
|
const { getIcon } = useIcons();
|
|
const Icon = getIcon(skill.icon ?? 'IconSparkles');
|
|
|
|
return (
|
|
<TableRow
|
|
key={skill.id}
|
|
to={link}
|
|
gridTemplateColumns="1fr 120px 36px"
|
|
style={{ opacity: skill.isActive ? 1 : 0.5 }}
|
|
>
|
|
<TableCell
|
|
color={themeCssVariables.font.color.primary}
|
|
gap={themeCssVariables.spacing[2]}
|
|
minWidth="0"
|
|
overflow="hidden"
|
|
>
|
|
<StyledIconContainer>
|
|
<Icon size={ICON_SIZES.md} />
|
|
</StyledIconContainer>
|
|
<OverflowingTextWithTooltip text={skill.label} />
|
|
</TableCell>
|
|
<TableCell>
|
|
<SettingsItemTypeTag item={skill} />
|
|
</TableCell>
|
|
<TableCell align="right">{action}</TableCell>
|
|
</TableRow>
|
|
);
|
|
};
|