mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 13:37:22 +00:00
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
71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { SummaryCard } from '@/object-record/record-show/components/SummaryCard';
|
|
import { PageLayoutContent } from '@/page-layout/components/PageLayoutContent';
|
|
import { PageLayoutContentProvider } from '@/page-layout/contexts/PageLayoutContentContext';
|
|
import { useCurrentPageLayout } from '@/page-layout/hooks/useCurrentPageLayout';
|
|
import { usePageLayoutTabWithVisibleWidgetsOrThrow } from '@/page-layout/hooks/usePageLayoutTabWithVisibleWidgetsOrThrow';
|
|
import { getTabLayoutMode } from '@/page-layout/utils/getTabLayoutMode';
|
|
import { useLayoutRenderingContext } from '@/ui/layout/contexts/LayoutRenderingContext';
|
|
import { useTargetRecord } from '@/ui/layout/contexts/useTargetRecord';
|
|
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
|
|
import { styled } from '@linaria/react';
|
|
import { PageLayoutType } from '~/generated-metadata/graphql';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledContainer = styled.div`
|
|
background: ${themeCssVariables.background.secondary};
|
|
border-bottom-left-radius: 8px;
|
|
border-right: 1px solid ${themeCssVariables.border.color.medium};
|
|
border-top-left-radius: 8px;
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
grid-template-rows: auto 1fr;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
height: 100%;
|
|
`;
|
|
|
|
type PageLayoutLeftPanelProps = {
|
|
pinnedLeftTabId: string;
|
|
};
|
|
|
|
export const PageLayoutLeftPanel = ({
|
|
pinnedLeftTabId,
|
|
}: PageLayoutLeftPanelProps) => {
|
|
const { currentPageLayout } = useCurrentPageLayout();
|
|
const targetRecordIdentifier = useTargetRecord();
|
|
const { isInRightDrawer } = useLayoutRenderingContext();
|
|
const pinnedTab = usePageLayoutTabWithVisibleWidgetsOrThrow(pinnedLeftTabId);
|
|
|
|
if (currentPageLayout?.type !== PageLayoutType.RECORD_PAGE) {
|
|
return null;
|
|
}
|
|
|
|
const layoutMode = getTabLayoutMode({
|
|
tab: pinnedTab,
|
|
pageLayoutType: currentPageLayout.type,
|
|
});
|
|
|
|
return (
|
|
<StyledContainer>
|
|
<SummaryCard
|
|
objectNameSingular={targetRecordIdentifier.targetObjectNameSingular}
|
|
objectRecordId={targetRecordIdentifier.id}
|
|
isInRightDrawer={isInRightDrawer}
|
|
/>
|
|
|
|
<PageLayoutContentProvider
|
|
value={{
|
|
tabId: pinnedLeftTabId,
|
|
layoutMode,
|
|
}}
|
|
>
|
|
<ScrollWrapper
|
|
componentInstanceId={`page-layout-left-panel-${pinnedLeftTabId}`}
|
|
defaultEnableXScroll={false}
|
|
defaultEnableYScroll={true}
|
|
>
|
|
<PageLayoutContent />
|
|
</ScrollWrapper>
|
|
</PageLayoutContentProvider>
|
|
</StyledContainer>
|
|
);
|
|
};
|