Charles Bochet
c4140f85df
## Emotion → Linaria migration — PR 1 of 10
First batch of the `twenty-front` migration from Emotion (runtime
CSS-in-JS) to Linaria (zero-runtime, build-time extraction via
wyw-in-js). Covers **100 files** across 10 small standalone modules —
chosen as the lowest-risk starting point.
### Modules migrated
spreadsheet-import (28) · navigation-menu-item (17) · views (14) ·
billing (10) · blocknote-editor (7) · advanced-text-editor (7) ·
favorites (7) · navigation (4) · information-banner (3) ·
sign-in-background-mock (3)
### Migration pattern
Every file follows the same mechanical transformation:
| Emotion | Linaria |
|---|---|
| `import styled from '@emotion/styled'` | `import { styled } from
'@linaria/react'` |
| `${({ theme }) => theme.font.color.primary}` |
`${themeCssVariables.font.color.primary}` |
| `${({ theme }) => theme.spacing(4)}` |
`${themeCssVariables.spacing[4]}` |
| `const theme = useTheme()` | `const { theme } =
useContext(ThemeContext)` |
| `import { type Theme } from '@emotion/react'` | `import { type
ThemeType } from 'twenty-ui/theme'` |
`themeCssVariables` is a build-time object where every leaf is a
`var(--t-xxx)` CSS custom property reference, evaluated statically by
wyw-in-js. Runtime theme access (icon sizes, colors passed as props)
uses `useContext(ThemeContext)`.
### Gotchas encountered & fixed
- **Interpolation return types** — wyw-in-js requires `string | number`,
never `false`/`undefined`. Replaced `condition && 'css'` with `condition
? 'css' : ''`.
- **`css` tag inside `styled` templates** — Linaria `css` returns a
class name, not CSS text. Replaced with plain template strings.
- **`styled(Component)` needs `className`** — added `className` prop to
`NavigationDrawerSection`, `DropdownMenuItemsContainer`, and `Heading`.
- **`shouldForwardProp` not supported** — Linaria filters invalid DOM
props automatically for HTML elements. For custom components, used
wrapper divs where needed.
- **`FormFieldPlaceholderStyles`** — converted from Emotion `css`
function to a static string using `themeCssVariables`.
98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
import { useBlockNoteEditor } from '@blocknote/react';
|
|
import { styled } from '@linaria/react';
|
|
import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
|
|
import { motion } from 'framer-motion';
|
|
import { createPortal } from 'react-dom';
|
|
|
|
import { SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID } from '@/ui/input/constants/SlashMenuDropdownClickOutsideId';
|
|
import { SLASH_MENU_LIST_ID } from '@/ui/input/constants/SlashMenuListId';
|
|
import { CustomSlashMenuListItem } from '@/blocknote-editor/components/CustomSlashMenuListItem';
|
|
import { CustomSlashMenuSelectedIndexSyncEffect } from '@/blocknote-editor/components/CustomSlashMenuSelectedIndexSyncEffect';
|
|
import type {
|
|
CustomSlashMenuProps,
|
|
SuggestionItem,
|
|
} from '@/blocknote-editor/types/types';
|
|
import { DropdownContent } from '@/ui/layout/dropdown/components/DropdownContent';
|
|
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
|
|
import { OverlayContainer } from '@/ui/layout/overlay/components/OverlayContainer';
|
|
import { SelectableList } from '@/ui/layout/selectable-list/components/SelectableList';
|
|
|
|
export type { SuggestionItem };
|
|
|
|
const StyledContainer = styled.div`
|
|
height: 1px;
|
|
width: 1px;
|
|
`;
|
|
|
|
export const CustomSlashMenu = ({
|
|
items,
|
|
selectedIndex,
|
|
}: CustomSlashMenuProps) => {
|
|
const editor = useBlockNoteEditor();
|
|
|
|
const currentBlock = editor?.getTextCursorPosition()?.block;
|
|
const blockType = currentBlock?.type;
|
|
const headingLevel =
|
|
blockType === 'heading' ? Number(currentBlock?.props?.level) : null;
|
|
|
|
const getOffsetValue = (placement: string) => {
|
|
if (!placement.startsWith('top')) return 0;
|
|
|
|
switch (headingLevel) {
|
|
case 1:
|
|
return 65;
|
|
case 2:
|
|
return 50;
|
|
case 3:
|
|
return 45;
|
|
default:
|
|
return 40;
|
|
}
|
|
};
|
|
|
|
const { refs, floatingStyles } = useFloating({
|
|
placement: 'bottom-start',
|
|
whileElementsMounted: autoUpdate,
|
|
middleware: [flip(), offset(({ placement }) => getOffsetValue(placement))],
|
|
});
|
|
|
|
return (
|
|
<StyledContainer ref={refs.setReference}>
|
|
<CustomSlashMenuSelectedIndexSyncEffect
|
|
items={items}
|
|
selectedIndex={selectedIndex}
|
|
/>
|
|
<>
|
|
{createPortal(
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.1 }}
|
|
>
|
|
<OverlayContainer
|
|
ref={refs.setFloating}
|
|
style={floatingStyles}
|
|
data-click-outside-id={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
|
|
>
|
|
<DropdownContent>
|
|
<DropdownMenuItemsContainer hasMaxHeight>
|
|
<SelectableList
|
|
focusId={SLASH_MENU_DROPDOWN_CLICK_OUTSIDE_ID}
|
|
selectableListInstanceId={SLASH_MENU_LIST_ID}
|
|
selectableItemIdArray={items.map((item) => item.title)}
|
|
>
|
|
{items.map((item) => (
|
|
<CustomSlashMenuListItem key={item.title} item={item} />
|
|
))}
|
|
</SelectableList>
|
|
</DropdownMenuItemsContainer>
|
|
</DropdownContent>
|
|
</OverlayContainer>
|
|
</motion.div>,
|
|
document.body,
|
|
)}
|
|
</>
|
|
</StyledContainer>
|
|
);
|
|
};
|