Files
twenty_crm/packages/twenty-front/src/modules/settings/components/SettingsRadioCardContainer.tsx
Paul Rastoin 4a4e65fe4a [REFACTOR] Twenty UI multi barrel (#11301)
# 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
2025-04-03 09:47:55 +00:00

45 lines
1.1 KiB
TypeScript

import styled from '@emotion/styled';
import { SettingsRadioCard } from '@/settings/components/SettingsRadioCard';
import { IconComponent } from 'twenty-ui/display';
const StyledRadioCardContainer = styled.div`
display: flex;
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(4)};
`;
type SettingsRadioCardContainerProps = {
onChange: (value: string) => void;
value: string;
options: Array<{
value: string;
title: string;
description?: string;
Icon?: IconComponent;
}>;
};
export const SettingsRadioCardContainer = ({
options,
value,
onChange,
}: SettingsRadioCardContainerProps) => {
return (
<StyledRadioCardContainer role="radiogroup">
{options.map((option) => (
<SettingsRadioCard
key={option.value}
role="radio"
value={option.value}
isSelected={value === option.value}
handleSelect={onChange}
title={option.title}
description={option.description}
Icon={option.Icon}
ariaChecked={value === option.value}
/>
))}
</StyledRadioCardContainer>
);
};