Charles BochetandGitHub
3b2bf39565
## Summary - Move Modal UI components (`Modal`, `ModalContent`, `ModalHeader`, `ModalFooter`, `ModalBackdrop`) from `twenty-front` to `twenty-ui` as stateless, reusable components - Create `ModalStatefulWrapper` in `twenty-front` that connects Jotai state (`isModalOpenedComponentState`) to the stateless `Modal` via an `isOpen` prop - Rename `modalVariant` prop to `overlay` with clearer values: `'dark'` (default), `'light'` (in-container), `'transparent'` (invisible panel). Remove unused `'medium'` overlay - Rename `modalId` to `modalInstanceId` across the entire modal zone (~30 consumer files) - Extract `ModalProps` to its own file in `twenty-ui/types/ModalProps.ts`; extract `ModalStatefulWrapperProps` to its own file using `Pick<ModalProps, ...>` for shared props - Extract `ModalBackdrop` to its own file and export from `twenty-ui`; use it in `UserOrMetadataLoader` instead of a local styled component - Use `ModalFooter` in `StepNavigationButton` and `ModalHeader` in `SpreadsheetImportStepperContainer` instead of duplicated `styled.div` definitions - Remove unused `onClose` prop from stateless `Modal`; fix `typeof document` guard in `ModalStatefulWrapper` - Split shared types into individual files: `ModalSize.ts`, `ModalPadding.ts`, `ModalOverlay.ts` - Extract wyw profiling instrumentation from `vite.config.ts` into reusable `createWywProfilingPlugin` with parametrized threshold and improved logging - Delete old `Modal.tsx`, `Modal.styles.ts`, `ModalContent.tsx`, `ModalHeader.tsx`, `ModalFooter.tsx` from `twenty-front` - Add comprehensive Storybook stories in `twenty-ui` covering Default, Confirmation, Small, ExtraLarge, Closed, and Interactive variants
44 lines
1.4 KiB
TypeScript
44 lines
1.4 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
|
|
import { useShowAuthModal } from '@/ui/layout/hooks/useShowAuthModal';
|
|
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
|
|
import { NAVIGATION_DRAWER_CONSTRAINTS } from '@/ui/layout/resizable-panel/constants/NavigationDrawerConstraints';
|
|
import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
|
|
import { ModalBackdrop } from 'twenty-ui/layout';
|
|
import { LeftPanelSkeletonLoader } from '~/loading/components/LeftPanelSkeletonLoader';
|
|
import { RightPanelSkeletonLoader } from '~/loading/components/RightPanelSkeletonLoader';
|
|
|
|
const StyledContainer = styled.div`
|
|
background: ${themeCssVariables.background.noisy};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 12px;
|
|
height: 100dvh;
|
|
min-width: ${NAVIGATION_DRAWER_CONSTRAINTS.default}px;
|
|
width: 100%;
|
|
padding: 12px 8px 12px 8px;
|
|
overflow: hidden;
|
|
|
|
@media (max-width: ${MOBILE_VIEWPORT}px) {
|
|
width: 100%;
|
|
}
|
|
`;
|
|
|
|
export const UserOrMetadataLoader = () => {
|
|
const showAuthModal = useShowAuthModal();
|
|
|
|
return (
|
|
<StyledContainer>
|
|
{showAuthModal && (
|
|
<ModalBackdrop
|
|
overlay="dark"
|
|
backdropZIndex={RootStackingContextZIndices.RootModalBackDrop}
|
|
/>
|
|
)}
|
|
<LeftPanelSkeletonLoader />
|
|
<RightPanelSkeletonLoader />
|
|
</StyledContainer>
|
|
);
|
|
};
|