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
56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
import styled from '@emotion/styled';
|
|
import {
|
|
Chip,
|
|
ChipAccent,
|
|
ChipProps,
|
|
ChipSize,
|
|
ChipVariant,
|
|
} from '@ui/components/chip/Chip';
|
|
import { MouseEvent } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
|
|
export type LinkChipProps = Omit<
|
|
ChipProps,
|
|
'onClick' | 'disabled' | 'clickable'
|
|
> & {
|
|
to: string;
|
|
onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;
|
|
};
|
|
|
|
// Ideally we would use the UndecoratedLink component from @ui/navigation
|
|
// but it led to a bug probably linked to circular dependencies, which was hard to solve
|
|
const StyledLink = styled(Link)`
|
|
text-decoration: none;
|
|
`;
|
|
|
|
export const LinkChip = ({
|
|
to,
|
|
size = ChipSize.Small,
|
|
label,
|
|
isLabelHidden = false,
|
|
variant = ChipVariant.Regular,
|
|
leftComponent = null,
|
|
rightComponent = null,
|
|
accent = ChipAccent.TextPrimary,
|
|
className,
|
|
maxWidth,
|
|
onClick,
|
|
}: LinkChipProps) => {
|
|
return (
|
|
<StyledLink to={to} onClick={onClick}>
|
|
<Chip
|
|
size={size}
|
|
label={label}
|
|
isLabelHidden={isLabelHidden}
|
|
clickable={true}
|
|
variant={variant}
|
|
leftComponent={leftComponent}
|
|
rightComponent={rightComponent}
|
|
accent={accent}
|
|
className={className}
|
|
maxWidth={maxWidth}
|
|
/>
|
|
</StyledLink>
|
|
);
|
|
};
|