Refactor modal (#18377)

## 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

packages/twenty-front/src/modules/billing/components/SettingsBillingSubscriptionInfo.tsx

@@ -507,7 +507,7 @@ export const SettingsBillingSubscriptionInfo = ({
           )}
       </StyledSwitchButtonContainer>
       <ConfirmationModal
-        modalId={SWITCH_BILLING_INTERVAL_TO_YEARLY_MODAL_ID}
+        modalInstanceId={SWITCH_BILLING_INTERVAL_TO_YEARLY_MODAL_ID}
         title={t`Change to Yearly?`}
         subtitle={confirmationModalSwitchToYearlyMessage()}
         onConfirmClick={switchInterval}
@@ -516,7 +516,7 @@ export const SettingsBillingSubscriptionInfo = ({
         loading={isSwitchingInterval}
       />
       <ConfirmationModal
-        modalId={SWITCH_BILLING_INTERVAL_TO_MONTHLY_MODAL_ID}
+        modalInstanceId={SWITCH_BILLING_INTERVAL_TO_MONTHLY_MODAL_ID}
         title={t`Change to Monthly?`}
         subtitle={confirmationModalSwitchToMonthlyMessage()}
         onConfirmClick={switchInterval}
@@ -525,7 +525,7 @@ export const SettingsBillingSubscriptionInfo = ({
         loading={isSwitchingInterval}
       />
       <ConfirmationModal
-        modalId={CANCEL_SWITCH_BILLING_INTERVAL_MODAL_ID}
+        modalInstanceId={CANCEL_SWITCH_BILLING_INTERVAL_MODAL_ID}
         title={t`Cancel interval switching?`}
         subtitle={confirmationModalCancelIntervalSwitchingMessage()}
         onConfirmClick={cancelIntervalSwitching}
@@ -534,7 +534,7 @@ export const SettingsBillingSubscriptionInfo = ({
         loading={isCancellingIntervalSwitch}
       />
       <ConfirmationModal
-        modalId={SWITCH_BILLING_PLAN_TO_ENTERPRISE_MODAL_ID}
+        modalInstanceId={SWITCH_BILLING_PLAN_TO_ENTERPRISE_MODAL_ID}
         title={t`Change to Organization Plan?`}
         subtitle={confirmationModalSwitchToOrganizationMessage()}
         onConfirmClick={switchPlan}
@@ -543,7 +543,7 @@ export const SettingsBillingSubscriptionInfo = ({
         loading={isSwitchingPlan}
       />
       <ConfirmationModal
-        modalId={SWITCH_BILLING_PLAN_TO_PRO_MODAL_ID}
+        modalInstanceId={SWITCH_BILLING_PLAN_TO_PRO_MODAL_ID}
         title={t`Change to Pro Plan?`}
         subtitle={confirmationModalSwitchToProMessage()}
         onConfirmClick={switchPlan}
@@ -552,7 +552,7 @@ export const SettingsBillingSubscriptionInfo = ({
         loading={isSwitchingPlan}
       />
       <ConfirmationModal
-        modalId={CANCEL_SWITCH_BILLING_PLAN_MODAL_ID}
+        modalInstanceId={CANCEL_SWITCH_BILLING_PLAN_MODAL_ID}
         title={t`Cancel plan switching?`}
         subtitle={confirmationModalCancelPlanSwitchingMessage()}
         onConfirmClick={cancelPlanSwitching}
@@ -561,7 +561,7 @@ export const SettingsBillingSubscriptionInfo = ({
         loading={isCancellingPlanSwitch}
       />
       <ConfirmationModal
-        modalId={END_TRIAL_PERIOD_MODAL_ID}
+        modalInstanceId={END_TRIAL_PERIOD_MODAL_ID}
         title={t`Start Your Subscription`}
         subtitle={t`We will activate your paid plan. Do you want to proceed?`}
         onConfirmClick={endTrialPeriod}
@@ -570,7 +570,7 @@ export const SettingsBillingSubscriptionInfo = ({
         loading={isEndTrialPeriodLoading}
       />
       <ConfirmationModal
-        modalId={CANCEL_SWITCH_METERED_PRICE_MODAL_ID}
+        modalInstanceId={CANCEL_SWITCH_METERED_PRICE_MODAL_ID}
         title={t`Cancel metered tier switching?`}
         subtitle={t`You have scheduled a metered tier change. Do you want to cancel it?`}
         onConfirmClick={cancelMeteredSwitching}

packages/twenty-front/src/modules/billing/components/internal/MeteredPriceSelector.tsx

@@ -183,7 +183,7 @@ export const MeteredPriceSelector = ({
         )}
       </StyledRow>
       <ConfirmationModal
-        modalId={confirmModalId}
+        modalInstanceId={confirmModalId}
         title={isUpgrade() ? t`Confirm upgrade` : t`Confirm downgrade`}
         subtitle={t`Confirm changing your current credit plan.`}
         confirmButtonText={isUpgrade() ? t`Upgrade` : t`Downgrade`}