diff --git a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx index ecf0b557ed..579513edfb 100644 --- a/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx +++ b/packages/twenty-front/src/modules/activities/calendar/components/CalendarEventDetails.tsx @@ -1,4 +1,4 @@ -import { css, useTheme } from '@emotion/react'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { useLingui } from '@lingui/react/macro'; import { useCallback, useState } from 'react'; @@ -25,7 +25,13 @@ import { useIsRecordReadOnly } from '@/object-record/read-only/hooks/useIsRecord import { isRecordFieldReadOnly } from '@/object-record/read-only/utils/isRecordFieldReadOnly'; import { getRecordFieldInputInstanceId } from '@/object-record/utils/getRecordFieldInputId'; import { isDefined } from 'twenty-shared/utils'; -import { Chip, ChipAccent, ChipSize, ChipVariant } from 'twenty-ui/components'; +import { + AvatarOrIcon, + Chip, + ChipAccent, + ChipSize, + ChipVariant, +} from 'twenty-ui/components'; import { IconCalendarEvent } from 'twenty-ui/display'; import { beautifyPastDateRelativeToNow } from '~/utils/date-utils'; @@ -88,7 +94,6 @@ export const CalendarEventDetails = ({ calendarEvent, }: CalendarEventDetailsProps) => { const { t } = useLingui(); - const theme = useTheme(); const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular: CoreObjectNameSingular.CalendarEvent, }); @@ -202,7 +207,7 @@ export const CalendarEventDetails = ({ size={ChipSize.Large} variant={ChipVariant.Highlighted} clickable={false} - leftComponent={} + leftComponent={} label={t`Event`} /> diff --git a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx index 3daf01b105..02294e3bc9 100644 --- a/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx +++ b/packages/twenty-front/src/modules/advanced-text-editor/components/WorkflowAttachmentChip.tsx @@ -4,7 +4,7 @@ import { IconMapping } from '@/file/utils/fileIconMappings'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { type WorkflowAttachment } from 'twenty-shared/workflow'; -import { AvatarChip } from 'twenty-ui/components'; +import { AvatarOrIcon } from 'twenty-ui/components'; import { IconX } from 'twenty-ui/display'; type WorkflowAttachmentChipProps = { @@ -68,7 +68,7 @@ export const WorkflowAttachmentChip = ({ return ( - diff --git a/packages/twenty-front/src/modules/ai/components/RecordLink.tsx b/packages/twenty-front/src/modules/ai/components/RecordLink.tsx index 2cdeea3d7d..0019480444 100644 --- a/packages/twenty-front/src/modules/ai/components/RecordLink.tsx +++ b/packages/twenty-front/src/modules/ai/components/RecordLink.tsx @@ -2,7 +2,7 @@ import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadata import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage'; import { t } from '@lingui/core/macro'; import { isNonEmptyString } from '@sniptt/guards'; -import { AvatarChip, ChipVariant, LinkChip } from 'twenty-ui/components'; +import { AvatarOrIcon, ChipVariant, LinkChip } from 'twenty-ui/components'; type RecordLinkProps = { objectNameSingular: string; @@ -34,7 +34,7 @@ export const RecordLink = ({ to={linkToShowPage} variant={ChipVariant.Highlighted} leftComponent={ - ) : ( - ); const rightComponent = onRemove ? ( - ) : undefined; + const hasRightDivider = isDefined(onRemove); + if (isDefined(fileUrl)) { return ( ); } @@ -73,6 +80,7 @@ export const AgentChatFilePreview = ({ clickable={false} leftComponent={leftComponent} rightComponent={rightComponent} + rightComponentDivider={hasRightDivider} /> ); }; diff --git a/packages/twenty-front/src/modules/file/components/FileIcon.tsx b/packages/twenty-front/src/modules/file/components/FileIcon.tsx index ee2e224d6b..e68f900cc7 100644 --- a/packages/twenty-front/src/modules/file/components/FileIcon.tsx +++ b/packages/twenty-front/src/modules/file/components/FileIcon.tsx @@ -3,12 +3,12 @@ import { IconMapping } from '@/file/utils/fileIconMappings'; import { useTheme } from '@emotion/react'; import styled from '@emotion/styled'; import { type FileCategory } from 'twenty-shared/types'; +import { AvatarOrIcon } from 'twenty-ui/components'; type FileIconSize = 'small' | 'medium'; const StyledIconContainer = styled.div<{ background: string; - size: FileIconSize; }>` align-items: center; background: ${({ background }) => background}; @@ -16,22 +16,14 @@ const StyledIconContainer = styled.div<{ color: ${({ theme }) => theme.grayScale.gray1}; display: flex; flex-shrink: 0; - height: ${({ size }) => (size === 'small' ? '14px' : 'auto')}; justify-content: center; - padding: ${({ size }) => (size === 'small' ? '0' : '5px')}; - width: ${({ size }) => (size === 'small' ? '14px' : 'auto')}; + padding: 5px; `; -export const FileIcon = ({ - fileCategory, - size = 'medium', -}: { - fileCategory: AttachmentFileCategory | FileCategory; - size?: FileIconSize; -}) => { +const useFileIconColors = () => { const theme = useTheme(); - const iconColors = { + return { ARCHIVE: theme.color.gray, AUDIO: theme.color.pink, IMAGE: theme.color.amber, @@ -41,13 +33,31 @@ export const FileIcon = ({ VIDEO: theme.color.purple, OTHER: theme.color.gray, }; +}; +export const FileIcon = ({ + fileCategory, + size = 'medium', +}: { + fileCategory: AttachmentFileCategory | FileCategory; + size?: FileIconSize; +}) => { + const theme = useTheme(); + const iconColors = useFileIconColors(); const Icon = IconMapping[fileCategory]; + if (size === 'small') { + return ( + + ); + } + return ( {Icon && } diff --git a/packages/twenty-front/src/modules/mention/components/MentionRecordChip.tsx b/packages/twenty-front/src/modules/mention/components/MentionRecordChip.tsx index b41702d111..b024406c2c 100644 --- a/packages/twenty-front/src/modules/mention/components/MentionRecordChip.tsx +++ b/packages/twenty-front/src/modules/mention/components/MentionRecordChip.tsx @@ -1,7 +1,12 @@ import { getLinkToShowPage } from '@/object-metadata/utils/getLinkToShowPage'; import { t } from '@lingui/core/macro'; import { isNonEmptyString } from '@sniptt/guards'; -import { AvatarChip, Chip, ChipVariant, LinkChip } from 'twenty-ui/components'; +import { + AvatarOrIcon, + Chip, + ChipVariant, + LinkChip, +} from 'twenty-ui/components'; type MentionRecordChipProps = { recordId: string; @@ -50,7 +55,7 @@ export const MentionRecordChip = ({ variant={ChipVariant.Highlighted} className={className} leftComponent={ - ( ( - void; - testId?: string; - maxWidth?: number; - forceEmptyText?: boolean; - variant?: ChipVariant; - rightComponent?: React.ReactNode; - emptyLabel?: string; -}; - -export const MultipleAvatarChip = ({ - Icons, - text, - onClick, - testId, - maxWidth, - rightComponent, - variant = ChipVariant.Static, - forceEmptyText = false, - emptyLabel, -}: MultipleAvatarChipProps) => { - return ( - - - {Icons.map((Icon, index) => ( - {Icon} - ))} - - } - rightComponent={rightComponent} - clickable={isDefined(onClick)} - maxWidth={maxWidth} - emptyLabel={emptyLabel} - /> - - ); -}; diff --git a/packages/twenty-ui/src/components/avatar-chip/__stories__/MultipleAvatarChip.stories.tsx b/packages/twenty-ui/src/components/avatar-chip/__stories__/MultipleAvatarChip.stories.tsx deleted file mode 100644 index 9a393e02f2..0000000000 --- a/packages/twenty-ui/src/components/avatar-chip/__stories__/MultipleAvatarChip.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { type Meta, type StoryObj } from '@storybook/react-vite'; -import { MultipleAvatarChip } from '@ui/components'; -import { IconBuildingSkyscraper, IconUser } from '@ui/display'; -import { ComponentDecorator } from '@ui/testing'; - -const meta: Meta = { - title: 'UI/Components/MultipleAvatarChip', - component: MultipleAvatarChip, - decorators: [ComponentDecorator], -}; - -export default meta; -type Story = StoryObj; - -export const SingleIcon: Story = { - args: { - Icons: [], - text: 'Person', - }, -}; - -export const MultipleIcons: Story = { - args: { - Icons: [, ], - text: 'Person & Company', - }, -}; - -export const IconsOnly: Story = { - args: { - Icons: [, ], - }, -}; diff --git a/packages/twenty-ui/src/components/avatar-chip/AvatarChip.tsx b/packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx similarity index 75% rename from packages/twenty-ui/src/components/avatar-chip/AvatarChip.tsx rename to packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx index 70c26942d5..24de8c13d8 100644 --- a/packages/twenty-ui/src/components/avatar-chip/AvatarChip.tsx +++ b/packages/twenty-ui/src/components/avatar-or-icon/AvatarOrIcon.tsx @@ -2,7 +2,7 @@ import { styled } from '@linaria/react'; import { Avatar } from '@ui/display/avatar/components/Avatar'; import { type AvatarType } from '@ui/display/avatar/types/AvatarType'; import { type IconComponent } from '@ui/display/icon/types/IconComponent'; -import { ThemeContext, themeCssVariables } from '@ui/theme'; +import { ThemeContext } from '@ui/theme'; import { type Nullable } from '@ui/utilities'; import { useContext } from 'react'; import { isDefined } from 'twenty-shared/utils'; @@ -19,24 +19,14 @@ const StyledIconWithBackgroundContainer = styled.div<{ background-color: ${({ backgroundColor }) => backgroundColor}; `; -const StyledAvatarChipWrapper = styled.div<{ +const StyledAvatarOrIconWrapper = styled.div<{ isClickable: boolean; - divider: AvatarChipProps['divider']; }>` - border-left: ${({ divider }) => - divider === 'left' - ? `1px solid ${themeCssVariables.border.color.light}` - : 'none'}; - border-right: ${({ divider }) => - divider === 'right' - ? `1px solid ${themeCssVariables.border.color.light}` - : 'none'}; - cursor: ${({ isClickable }) => (isClickable ? 'pointer' : 'inherit')}; display: flex; `; -export type AvatarChipProps = { +export type AvatarOrIconProps = { placeholder?: string; avatarUrl?: string; avatarType?: Nullable; @@ -45,11 +35,10 @@ export type AvatarChipProps = { IconBackgroundColor?: string; isIconInverted?: boolean; placeholderColorSeed?: string; - divider?: 'right' | 'left'; onClick?: () => void; }; -export const AvatarChip = ({ +export const AvatarOrIcon = ({ Icon, placeholderColorSeed, avatarType, @@ -59,8 +48,7 @@ export const AvatarChip = ({ IconColor, IconBackgroundColor, onClick, - divider, -}: AvatarChipProps) => { +}: AvatarOrIconProps) => { const { theme } = useContext(ThemeContext); if (!isDefined(Icon)) { return ( @@ -79,9 +67,8 @@ export const AvatarChip = ({ if (isIconInverted || isDefined(IconBackgroundColor)) { return ( - - + ); } return ( - - + ); }; diff --git a/packages/twenty-ui/src/components/avatar-chip/__stories__/AvatarChip.stories.tsx b/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx similarity index 67% rename from packages/twenty-ui/src/components/avatar-chip/__stories__/AvatarChip.stories.tsx rename to packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx index e0fae77a6d..8b26d33d1a 100644 --- a/packages/twenty-ui/src/components/avatar-chip/__stories__/AvatarChip.stories.tsx +++ b/packages/twenty-ui/src/components/avatar-or-icon/__stories__/AvatarOrIcon.stories.tsx @@ -1,16 +1,16 @@ import { type Meta, type StoryObj } from '@storybook/react-vite'; import { IconBuildingSkyscraper, IconUser } from '@ui/display'; import { ComponentDecorator, JotaiRootDecorator } from '@ui/testing'; -import { AvatarChip } from '../AvatarChip'; +import { AvatarOrIcon } from '../AvatarOrIcon'; -const meta: Meta = { - title: 'UI/Components/AvatarChip', - component: AvatarChip, +const meta: Meta = { + title: 'UI/Components/AvatarOrIcon', + component: AvatarOrIcon, decorators: [ComponentDecorator, JotaiRootDecorator], }; export default meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { @@ -47,26 +47,11 @@ export const WithInvertedIcon: Story = { }, }; -export const WithRightDivider: Story = { - args: { - placeholder: 'JD', - placeholderColorSeed: 'John Doe', - divider: 'right', - }, -}; - -export const WithLeftDivider: Story = { - args: { - Icon: IconUser, - divider: 'left', - }, -}; - export const Clickable: Story = { args: { placeholder: 'JD', placeholderColorSeed: 'John Doe', - onClick: () => alert('AvatarChip clicked'), + onClick: () => alert('AvatarOrIcon clicked'), }, }; @@ -74,6 +59,6 @@ export const ClickableIcon: Story = { args: { Icon: IconBuildingSkyscraper, isIconInverted: true, - onClick: () => alert('Icon AvatarChip clicked'), + onClick: () => alert('Icon AvatarOrIcon clicked'), }, }; diff --git a/packages/twenty-ui/src/components/chip/Chip.tsx b/packages/twenty-ui/src/components/chip/Chip.tsx index a3db2024b0..4aca3d53be 100644 --- a/packages/twenty-ui/src/components/chip/Chip.tsx +++ b/packages/twenty-ui/src/components/chip/Chip.tsx @@ -33,6 +33,7 @@ export type ChipProps = { accent?: ChipAccent; leftComponent?: ReactNode | null; rightComponent?: (() => ReactNode) | ReactNode | null; + rightComponentDivider?: boolean; className?: string; forceEmptyText?: boolean; emptyLabel?: string; @@ -131,16 +132,32 @@ const StyledContainer = styled.div< : 'var(--chip-horizontal-padding)'}; `; +const StyledRightComponentDivider = styled.div` + border-left: 1px solid ${themeCssVariables.border.color.light}; + align-self: stretch; +`; + const renderRightComponent = ( rightComponent: (() => ReactNode) | ReactNode | null, + rightComponentDivider?: boolean, ) => { if (!rightComponent) { return null; } - return typeof rightComponent === 'function' - ? rightComponent() - : rightComponent; + const rendered = + typeof rightComponent === 'function' ? rightComponent() : rightComponent; + + if (rightComponentDivider) { + return ( + <> + + {rendered} + + ); + } + + return rendered; }; export const Chip = ({ @@ -152,6 +169,7 @@ export const Chip = ({ variant = ChipVariant.Regular, leftComponent = null, rightComponent = null, + rightComponentDivider = false, accent = ChipAccent.TextPrimary, className, maxWidth, @@ -177,7 +195,7 @@ export const Chip = ({ ) : ( '' )} - {renderRightComponent(rightComponent)} + {renderRightComponent(rightComponent, rightComponentDivider)} ); }; diff --git a/packages/twenty-ui/src/components/chip/LinkChip.tsx b/packages/twenty-ui/src/components/chip/LinkChip.tsx index 6e0c42ecbb..087e2270d3 100644 --- a/packages/twenty-ui/src/components/chip/LinkChip.tsx +++ b/packages/twenty-ui/src/components/chip/LinkChip.tsx @@ -37,6 +37,7 @@ export const LinkChip = ({ variant = ChipVariant.Regular, leftComponent = null, rightComponent = null, + rightComponentDivider = false, accent = ChipAccent.TextPrimary, className, maxWidth, @@ -72,6 +73,7 @@ export const LinkChip = ({ variant={variant} leftComponent={leftComponent} rightComponent={rightComponent} + rightComponentDivider={rightComponentDivider} accent={accent} className={className} maxWidth={maxWidth} diff --git a/packages/twenty-ui/src/components/chip/__stories__/Chip.stories.tsx b/packages/twenty-ui/src/components/chip/__stories__/Chip.stories.tsx index 1f34766a56..cf32434396 100644 --- a/packages/twenty-ui/src/components/chip/__stories__/Chip.stories.tsx +++ b/packages/twenty-ui/src/components/chip/__stories__/Chip.stories.tsx @@ -1,4 +1,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite'; +import { IconUser, IconX } from '@ui/display'; +import { Avatar } from '@ui/display/avatar/components/Avatar'; import { CatalogDecorator, @@ -9,7 +11,7 @@ import { import { Chip, ChipAccent, ChipSize, ChipVariant } from '../Chip'; const meta: Meta = { - title: 'UI/Display/Chip/Chip', + title: 'UI/Components/Chip/Chip', component: Chip, }; @@ -29,11 +31,51 @@ export const Default: Story = { decorators: [ComponentDecorator], }; +export const WithLeftAvatar: Story = { + args: { + label: 'John Doe', + clickable: true, + variant: ChipVariant.Regular, + leftComponent: ( + + ), + }, + decorators: [ComponentDecorator], +}; + +export const WithLeftIcon: Story = { + args: { + label: 'Company', + clickable: true, + variant: ChipVariant.Regular, + leftComponent: , + }, + decorators: [ComponentDecorator], +}; + +export const EmptyLabel: Story = { + args: { + label: '', + clickable: true, + variant: ChipVariant.Regular, + leftComponent: ( + + ), + }, + decorators: [ComponentDecorator], +}; + export const Catalog: CatalogStory = { args: { clickable: true, label: 'Hello' }, argTypes: { size: { control: false }, variant: { control: false }, + accent: { control: false }, disabled: { control: false }, className: { control: false }, rightComponent: { control: false }, @@ -43,12 +85,6 @@ export const Catalog: CatalogStory = { pseudo: { hover: ['.hover'], active: ['.active'] }, catalog: { dimensions: [ - { - name: 'states', - values: ['default', 'hover', 'active', 'disabled'], - props: (state: string) => - state === 'default' ? {} : { className: state }, - }, { name: 'variants', values: Object.values(ChipVariant), @@ -59,6 +95,21 @@ export const Catalog: CatalogStory = { values: Object.values(ChipSize), props: (size: ChipSize) => ({ size }), }, + { + name: 'states', + values: ['default', 'hover', 'active', 'disabled'], + props: (state: string) => { + switch (state) { + case 'hover': + case 'active': + return { className: state }; + case 'disabled': + return { disabled: true }; + default: + return {}; + } + }, + }, { name: 'accents', values: Object.values(ChipAccent), @@ -69,3 +120,79 @@ export const Catalog: CatalogStory = { }, decorators: [CatalogDecorator], }; + +export const WithAvatarCatalog: CatalogStory = { + args: { + clickable: true, + label: 'John Doe', + leftComponent: ( + + ), + }, + argTypes: { + size: { control: false }, + variant: { control: false }, + accent: { control: false }, + disabled: { control: false }, + className: { control: false }, + rightComponent: { control: false }, + leftComponent: { control: false }, + }, + parameters: { + pseudo: { hover: ['.hover'], active: ['.active'] }, + catalog: { + dimensions: [ + { + name: 'variants', + values: Object.values(ChipVariant), + props: (variant: ChipVariant) => ({ variant }), + }, + { + name: 'sizes', + values: Object.values(ChipSize), + props: (size: ChipSize) => ({ size }), + }, + { + name: 'states', + values: ['default', 'hover', 'active', 'disabled'], + props: (state: string) => { + switch (state) { + case 'hover': + case 'active': + return { className: state }; + case 'disabled': + return { disabled: true }; + default: + return {}; + } + }, + }, + ], + }, + }, + decorators: [CatalogDecorator], +}; + +export const WithRightComponentDivider: Story = { + args: { + label: 'document.pdf', + variant: ChipVariant.Static, + clickable: false, + leftComponent: ( + + ), + rightComponent: , + rightComponentDivider: true, + }, + decorators: [ComponentDecorator], +}; diff --git a/packages/twenty-ui/src/components/chip/__stories__/LinkChip.stories.tsx b/packages/twenty-ui/src/components/chip/__stories__/LinkChip.stories.tsx index 646d05475f..d221523793 100644 --- a/packages/twenty-ui/src/components/chip/__stories__/LinkChip.stories.tsx +++ b/packages/twenty-ui/src/components/chip/__stories__/LinkChip.stories.tsx @@ -1,12 +1,18 @@ import { type Meta, type StoryObj } from '@storybook/react-vite'; -import { ComponentDecorator } from '@ui/testing'; +import { IconUser, IconX } from '@ui/display'; +import { Avatar } from '@ui/display/avatar/components/Avatar'; +import { + CatalogDecorator, + type CatalogStory, + ComponentDecorator, +} from '@ui/testing'; import { MemoryRouter } from 'react-router-dom'; import { ChipAccent, ChipSize, ChipVariant } from '../Chip'; import { LinkChip } from '../LinkChip'; const meta: Meta = { - title: 'UI/Display/Chip/LinkChip', + title: 'UI/Components/Chip/LinkChip', component: LinkChip, decorators: [ (Story) => ( @@ -14,7 +20,6 @@ const meta: Meta = { ), - ComponentDecorator, ], }; @@ -29,4 +34,153 @@ export const Default: Story = { variant: ChipVariant.Regular, accent: ChipAccent.TextPrimary, }, + decorators: [ComponentDecorator], +}; + +export const WithAvatar: Story = { + args: { + label: 'John Doe', + to: '/users/john-doe', + variant: ChipVariant.Regular, + leftComponent: ( + + ), + }, + decorators: [ComponentDecorator], +}; + +export const WithIcon: Story = { + args: { + label: 'Company', + to: '/companies/1', + variant: ChipVariant.Regular, + leftComponent: , + }, + decorators: [ComponentDecorator], +}; + +export const Catalog: CatalogStory = { + args: { label: 'Link Chip', to: '/example' }, + argTypes: { + size: { control: false }, + variant: { control: false }, + accent: { control: false }, + className: { control: false }, + rightComponent: { control: false }, + leftComponent: { control: false }, + }, + parameters: { + pseudo: { hover: ['.hover'], active: ['.active'] }, + catalog: { + dimensions: [ + { + name: 'variants', + values: Object.values(ChipVariant), + props: (variant: ChipVariant) => ({ variant }), + }, + { + name: 'sizes', + values: Object.values(ChipSize), + props: (size: ChipSize) => ({ size }), + }, + { + name: 'states', + values: ['default', 'hover', 'active'], + props: (state: string) => { + switch (state) { + case 'hover': + case 'active': + return { className: state }; + default: + return {}; + } + }, + }, + { + name: 'accents', + values: Object.values(ChipAccent), + props: (accent: ChipAccent) => ({ accent }), + }, + ], + }, + }, + decorators: [CatalogDecorator], +}; + +export const WithAvatarCatalog: CatalogStory = { + args: { + label: 'John Doe', + to: '/users/john-doe', + leftComponent: ( + + ), + }, + argTypes: { + size: { control: false }, + variant: { control: false }, + accent: { control: false }, + className: { control: false }, + rightComponent: { control: false }, + leftComponent: { control: false }, + }, + parameters: { + pseudo: { hover: ['.hover'], active: ['.active'] }, + catalog: { + dimensions: [ + { + name: 'variants', + values: Object.values(ChipVariant), + props: (variant: ChipVariant) => ({ variant }), + }, + { + name: 'sizes', + values: Object.values(ChipSize), + props: (size: ChipSize) => ({ size }), + }, + { + name: 'states', + values: ['default', 'hover', 'active'], + props: (state: string) => { + switch (state) { + case 'hover': + case 'active': + return { className: state }; + default: + return {}; + } + }, + }, + ], + }, + }, + decorators: [CatalogDecorator], +}; + +export const WithRightComponentDivider: Story = { + args: { + label: 'document.pdf', + to: '/files/document.pdf', + variant: ChipVariant.Static, + leftComponent: ( + + ), + rightComponent: , + rightComponentDivider: true, + }, + decorators: [ComponentDecorator], }; diff --git a/packages/twenty-ui/src/components/index.ts b/packages/twenty-ui/src/components/index.ts index 4e0e83d25e..cecc41633d 100644 --- a/packages/twenty-ui/src/components/index.ts +++ b/packages/twenty-ui/src/components/index.ts @@ -7,10 +7,8 @@ * |___/ */ -export type { AvatarChipProps } from './avatar-chip/AvatarChip'; -export { AvatarChip } from './avatar-chip/AvatarChip'; -export type { MultipleAvatarChipProps } from './avatar-chip/MultipleAvatarChip'; -export { MultipleAvatarChip } from './avatar-chip/MultipleAvatarChip'; +export type { AvatarOrIconProps } from './avatar-or-icon/AvatarOrIcon'; +export { AvatarOrIcon } from './avatar-or-icon/AvatarOrIcon'; export type { ChipProps } from './chip/Chip'; export { ChipSize, ChipAccent, ChipVariant, Chip } from './chip/Chip'; export { LINK_CHIP_CLICK_OUTSIDE_ID } from './chip/constants/LinkChipClickOutsideId'; diff --git a/packages/twenty-ui/vite.config.individual.ts b/packages/twenty-ui/vite.config.individual.ts index 94a7a7288a..4ec3f2d90f 100644 --- a/packages/twenty-ui/vite.config.individual.ts +++ b/packages/twenty-ui/vite.config.individual.ts @@ -35,11 +35,14 @@ export default defineConfig(() => { projects: ['tsconfig.json'], }), svgr(), - wyw({ - babelOptions: { - presets: ['@babel/preset-typescript', '@babel/preset-react'], - }, - }), + { + ...wyw({ + babelOptions: { + presets: ['@babel/preset-typescript', '@babel/preset-react'], + }, + }), + enforce: 'pre', + }, ], build: { cssCodeSplit: false, diff --git a/packages/twenty-ui/vite.config.ts b/packages/twenty-ui/vite.config.ts index 9b6d9d6452..480b9a53e3 100644 --- a/packages/twenty-ui/vite.config.ts +++ b/packages/twenty-ui/vite.config.ts @@ -81,11 +81,14 @@ export default defineConfig(({ command }) => { svgr(), dts(dtsConfig), checker(checkersConfig), - wyw({ - babelOptions: { - presets: ['@babel/preset-typescript', '@babel/preset-react'], - }, - }), + { + ...wyw({ + babelOptions: { + presets: ['@babel/preset-typescript', '@babel/preset-react'], + }, + }), + enforce: 'pre', + }, ], build: { cssCodeSplit: false,