Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { type AttachmentFileCategory } from '@/activities/files/types/AttachmentFileCategory';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import { useFileIconColors } from '@/file/hooks/useFileIconColors';
|
|
import { IconMapping } from '@/file/utils/fileIconMappings';
|
|
import { styled } from '@linaria/react';
|
|
import { type FileCategory } from 'twenty-shared/types';
|
|
import { AvatarOrIcon } from 'twenty-ui-deprecated/components';
|
|
import { useContext } from 'react';
|
|
import {
|
|
ThemeContext,
|
|
themeCssVariables,
|
|
} from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
type FileIconSize = 'small' | 'medium';
|
|
|
|
const StyledIconContainer = styled.div<{
|
|
background: string;
|
|
}>`
|
|
align-items: center;
|
|
background: ${({ background }) => background};
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
color: ${themeCssVariables.grayScale.gray1};
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
justify-content: center;
|
|
padding: 5px;
|
|
`;
|
|
|
|
export const FileIcon = ({
|
|
fileCategory,
|
|
size = 'medium',
|
|
}: {
|
|
fileCategory: AttachmentFileCategory | FileCategory;
|
|
size?: FileIconSize;
|
|
}) => {
|
|
const { theme } = useContext(ThemeContext);
|
|
const iconColors = useFileIconColors();
|
|
const Icon = IconMapping[fileCategory];
|
|
|
|
if (size === 'small') {
|
|
return (
|
|
<AvatarOrIcon
|
|
Icon={Icon}
|
|
IconBackgroundColor={iconColors[fileCategory] ?? theme.color.gray}
|
|
/>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<StyledIconContainer
|
|
background={iconColors[fileCategory] ?? theme.color.gray}
|
|
>
|
|
{isDefined(Icon) && (
|
|
<Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />
|
|
)}
|
|
</StyledIconContainer>
|
|
);
|
|
};
|