Charles Bochet
3bfdc2c83f
## Summary
Continues the Emotion → Linaria migration (PR 4-6 from the [migration
plan](docs/emotion-to-linaria-migration-plan.md)). Migrates **311
files** across four module groups:
| Module | Files |
|---|---|
| command-menu | 53 |
| workflow | 84 |
| page-layout | 84 |
| UI (partial - first ~80 files) | ~80 |
| twenty-ui (TEXT_INPUT_STYLE) | 1 |
| misc (hooks, keyboard-shortcut-menu, file-upload) | ~9 |
### Migration patterns applied
- `import styled from '@emotion/styled'` → `import { styled } from
'@linaria/react'`
- `import { useTheme } from '@emotion/react'` → `import { useContext }
from 'react'` + `import { ThemeContext } from 'twenty-ui/theme'`
- `${({ theme }) => theme.X.Y.Z}` → `${themeCssVariables.X.Y.Z}` (static
CSS variables)
- `theme.spacing(N)` → `themeCssVariables.spacing[N]`
- `styled(motion.div)` → `motion.create(StyledBase)` (11 components)
- `styled(Component)<TypeParams>` → wrapper div approach for non-HTML
elements
- Multi-declaration interpolations split into one CSS property per
interpolation
- Interpolation return types fixed (`&&` → ternary `? : ''`)
- `TEXT_INPUT_STYLE` converted from function to static string constant
(backward compatible)
- Emotion `<Global>` replaced with `useEffect` style injection
- Complex runtime-dependent styles use CSS custom properties via
`style={}` prop
### After this PR
- **Remaining files**: ~400 (object-record: ~160, settings: ~200, UI:
~44)
- **No breaking changes**: CSS variables resolve identically to the
previous Emotion theme values
91 lines
2.3 KiB
TypeScript
91 lines
2.3 KiB
TypeScript
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
|
|
import { PageHeader } from '@/ui/layout/page/components/PageHeader';
|
|
import {
|
|
Breadcrumb,
|
|
type BreadcrumbProps,
|
|
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
|
|
import { styled } from '@linaria/react';
|
|
import { useRef } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledFullScreenOverlay = styled.div`
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: ${themeCssVariables.background.noisy};
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100vh;
|
|
z-index: ${RootStackingContextZIndices.RootModal};
|
|
`;
|
|
|
|
const StyledFullScreenHeader = styled(PageHeader)`
|
|
padding-left: ${themeCssVariables.spacing[3]};
|
|
`;
|
|
|
|
const StyledFullScreenContent = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${themeCssVariables.spacing[3]};
|
|
flex: 1;
|
|
min-height: 0;
|
|
padding: 0 ${themeCssVariables.spacing[3]} ${themeCssVariables.spacing[3]}
|
|
${themeCssVariables.spacing[3]};
|
|
|
|
// Make the immediate child a flex column that grows, so nested components
|
|
// with height="100%" (e.g., editors) can size correctly.
|
|
> * {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
row-gap: ${themeCssVariables.spacing[5]};
|
|
}
|
|
`;
|
|
|
|
type UseFullScreenModalProps = {
|
|
links: BreadcrumbProps['links'];
|
|
onClose: () => void;
|
|
hasClosePageButton?: boolean;
|
|
};
|
|
|
|
export const useFullScreenModal = ({
|
|
links,
|
|
onClose,
|
|
hasClosePageButton = true,
|
|
}: UseFullScreenModalProps) => {
|
|
const overlayRef = useRef<HTMLDivElement>(null);
|
|
|
|
const renderFullScreenModal = (
|
|
children: React.ReactNode,
|
|
isOpen: boolean,
|
|
) => {
|
|
if (!isOpen) return null;
|
|
|
|
return createPortal(
|
|
<StyledFullScreenOverlay
|
|
ref={overlayRef}
|
|
data-globally-prevent-click-outside="true"
|
|
tabIndex={-1}
|
|
>
|
|
<StyledFullScreenHeader
|
|
title={<Breadcrumb links={links} />}
|
|
hasClosePageButton={hasClosePageButton}
|
|
onClosePage={onClose}
|
|
/>
|
|
<StyledFullScreenContent>{children}</StyledFullScreenContent>
|
|
</StyledFullScreenOverlay>,
|
|
document.body,
|
|
);
|
|
};
|
|
|
|
return {
|
|
overlayRef,
|
|
renderFullScreenModal,
|
|
};
|
|
};
|