Files
twenty/packages/twenty-front/src/modules/side-panel/hooks/useOpenFrontComponentInSidePanel.ts
T
Raphaël Bosi 9c9c34fccf Remove twenty-ui-deprecated and migrate frontend to twenty-ui (#21596)
Migrates `twenty-front`, `twenty-sdk`, and
`twenty-front-component-renderer` from `twenty-ui-deprecated` to
`twenty-ui` (mechanical import swap — the packages have API parity) and
deletes the deprecated package along with its workspace/CI/config
wiring.

Also adds `@linaria/react`/`@linaria/core` as direct deps of
`twenty-front` (it used them transitively via the deprecated package).

Note: move the required status check from `ci-ui-status-check` to
`ci-new-ui-status-check`.

Argos: the Storybook box-model/button-reset baseline shift (the bulk of
the visual diffs) is isolated in #21665 — Storybook now loads
twenty-ui's global `reset.scss`, which the production app already ships.
Once #21665 merges and this branch is rebased, the remaining Argos diffs
are component-level visual-parity items only.
2026-06-17 09:41:11 +00:00

58 lines
1.6 KiB
TypeScript

import { useSidePanelMenu } from '@/side-panel/hooks/useSidePanelMenu';
import { viewableFrontComponentIdComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentIdComponentState';
import { viewableFrontComponentRecordContextComponentState } from '@/side-panel/pages/front-component/states/viewableFrontComponentRecordContextComponentState';
import { useStore } from 'jotai';
import { SidePanelPages } from 'twenty-shared/types';
import { type IconComponent } from 'twenty-ui/display';
import { v4 } from 'uuid';
export const useOpenFrontComponentInSidePanel = () => {
const store = useStore();
const { navigateSidePanelMenu } = useSidePanelMenu();
const openFrontComponentInSidePanel = ({
frontComponentId,
pageTitle,
pageIcon,
resetNavigationStack = false,
recordContext,
}: {
frontComponentId: string;
pageTitle: string;
pageIcon: IconComponent;
resetNavigationStack?: boolean;
recordContext?: {
recordId: string;
objectNameSingular: string;
};
}) => {
const pageComponentInstanceId = v4();
store.set(
viewableFrontComponentIdComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
frontComponentId,
);
store.set(
viewableFrontComponentRecordContextComponentState.atomFamily({
instanceId: pageComponentInstanceId,
}),
recordContext ?? null,
);
navigateSidePanelMenu({
page: SidePanelPages.ViewFrontComponent,
pageTitle,
pageIcon,
pageId: pageComponentInstanceId,
resetNavigationStack,
});
};
return {
openFrontComponentInSidePanel,
};
};