Charles BochetandGitHub
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
73 lines
2.7 KiB
TypeScript
73 lines
2.7 KiB
TypeScript
import { useCommandMenuHistory } from '@/command-menu/hooks/useCommandMenuHistory';
|
|
import { SidePanelSubPageNavigationHeader } from '@/command-menu/pages/common/components/SidePanelSubPageNavigationHeader';
|
|
import { usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord } from '@/command-menu/pages/page-layout/hooks/usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord';
|
|
import { useWidgetInEditMode } from '@/command-menu/pages/page-layout/hooks/useWidgetInEditMode';
|
|
import { useTemporaryFieldsConfiguration } from '@/page-layout/hooks/useTemporaryFieldsConfiguration';
|
|
import { FieldsConfigurationEditor } from '@/page-layout/widgets/fields/components/FieldsConfigurationEditor';
|
|
import { FieldsWidgetGroupsDraftInitializationEffect } from '@/page-layout/widgets/fields/components/FieldsWidgetGroupsDraftInitializationEffect';
|
|
import { styled } from '@linaria/react';
|
|
import { t } from '@lingui/core/macro';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import {
|
|
type FieldsConfiguration,
|
|
WidgetConfigurationType,
|
|
} from '~/generated-metadata/graphql';
|
|
import { themeCssVariables } from 'twenty-ui/theme-constants';
|
|
|
|
const StyledOuterContainer = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
`;
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
flex: 1;
|
|
flex-direction: column;
|
|
gap: ${themeCssVariables.spacing[3]};
|
|
padding: ${themeCssVariables.spacing[2]};
|
|
overflow-y: auto;
|
|
`;
|
|
|
|
export const CommandMenuPageLayoutFieldsLayout = () => {
|
|
const { goBackFromCommandMenu } = useCommandMenuHistory();
|
|
|
|
const { pageLayoutId } =
|
|
usePageLayoutIdForRecordPageLayoutFromContextStoreTargetedRecord();
|
|
|
|
const { widgetInEditMode } = useWidgetInEditMode(pageLayoutId);
|
|
const temporaryFieldsConfiguration = useTemporaryFieldsConfiguration();
|
|
|
|
if (!isDefined(widgetInEditMode)) {
|
|
return null;
|
|
}
|
|
|
|
const widgetConfiguration = widgetInEditMode.configuration;
|
|
|
|
const fieldsConfiguration: FieldsConfiguration =
|
|
isDefined(widgetConfiguration) &&
|
|
widgetConfiguration.configurationType === WidgetConfigurationType.FIELDS
|
|
? (widgetConfiguration as FieldsConfiguration)
|
|
: temporaryFieldsConfiguration;
|
|
|
|
return (
|
|
<StyledOuterContainer>
|
|
<SidePanelSubPageNavigationHeader
|
|
title={t`Layout`}
|
|
onBackClick={goBackFromCommandMenu}
|
|
/>
|
|
<StyledContainer>
|
|
<FieldsWidgetGroupsDraftInitializationEffect
|
|
viewId={fieldsConfiguration.viewId ?? null}
|
|
pageLayoutId={pageLayoutId}
|
|
widgetId={widgetInEditMode.id}
|
|
/>
|
|
<FieldsConfigurationEditor
|
|
pageLayoutId={pageLayoutId}
|
|
widgetId={widgetInEditMode.id}
|
|
/>
|
|
</StyledContainer>
|
|
</StyledOuterContainer>
|
|
);
|
|
};
|