Paul Rastoin
4a4e65fe4a
# Introduction closes https://github.com/twentyhq/core-team-issues/issues/591 Same than for `twenty-shared` made in https://github.com/twentyhq/twenty/pull/11083. ## TODO - [x] Manual migrate twenty-website twenty-ui imports ## What's next: - Generate barrel and migration script factorization within own package + tests - Refactoring using preconstruct ? TimeBox - Lint circular dependencies - Lint import from barrel and forbid them ### Preconstruct We need custom rollup plugins addition, but preconstruct does not expose its rollup configuration. It might be possible to handle this using the babel overrides. But was a big tunnel. We could give it a try afterwards ! ( allowing cjs interop and stuff like that ) Stuck to vite lib app Closed related PRs: - https://github.com/twentyhq/twenty/pull/11294 - https://github.com/twentyhq/twenty/pull/11203
67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
import { SettingsIntegrationComponent } from '@/settings/integrations/components/SettingsIntegrationComponent';
|
|
import { SettingsIntegrationCategory } from '@/settings/integrations/types/SettingsIntegrationCategory';
|
|
import { H2Title } from 'twenty-ui/display';
|
|
import { Section } from 'twenty-ui/layout';
|
|
|
|
interface SettingsIntegrationGroupProps {
|
|
integrationGroup: SettingsIntegrationCategory;
|
|
}
|
|
|
|
const StyledIntegrationGroupHeader = styled.div`
|
|
align-items: start;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
`;
|
|
|
|
const StyledGroupLink = styled(Link)`
|
|
align-items: start;
|
|
display: flex;
|
|
flex-direction: row;
|
|
font-size: ${({ theme }) => theme.font.size.md};
|
|
gap: ${({ theme }) => theme.spacing(1)};
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
`;
|
|
|
|
const StyledIntegrationsSection = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
export const SettingsIntegrationGroup = ({
|
|
integrationGroup,
|
|
}: SettingsIntegrationGroupProps) => (
|
|
<Section>
|
|
<StyledIntegrationGroupHeader>
|
|
<H2Title title={integrationGroup.title} />
|
|
{integrationGroup.hyperlink && (
|
|
<StyledGroupLink
|
|
target={'_blank'}
|
|
to={integrationGroup.hyperlink ?? ''}
|
|
>
|
|
<div>{integrationGroup.hyperlinkText}</div>
|
|
<div>→</div>
|
|
</StyledGroupLink>
|
|
)}
|
|
</StyledIntegrationGroupHeader>
|
|
<StyledIntegrationsSection>
|
|
{integrationGroup.integrations.map((integration) => (
|
|
<SettingsIntegrationComponent
|
|
key={[
|
|
integrationGroup.key,
|
|
integration.from.key,
|
|
integration.to?.key,
|
|
].join('-')}
|
|
integration={integration}
|
|
/>
|
|
))}
|
|
</StyledIntegrationsSection>
|
|
</Section>
|
|
);
|