Improve tests (#871)

front/src/modules/ui/action-bar/components/__stories__/ActionBar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ActionBar } from '../ActionBar';
 

front/src/modules/ui/board/components/__stories__/BoardColumnEditTitleMenu.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import {
   BoardColumnEditTitleMenu,

front/src/modules/ui/button/components/__stories__/MainButton.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconBrandGoogle } from '@/ui/icon';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { MainButton } from '../MainButton';
 

front/src/modules/ui/button/components/__stories__/RoundedIconButton.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
 import { IconArrowRight } from '@/ui/icon';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { RoundedIconButton } from '../RoundedIconButton';
 

front/src/modules/ui/chip/components/Chip.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
+
+export enum ChipSize {
+  Large = 'large',
+  Small = 'small',
+}
+
+export enum ChipVariant {
+  Highlighted = 'highlighted',
+  Regular = 'regular',
+  Transparent = 'transparent',
+}
+
+type OwnProps = {
+  size?: ChipSize;
+  disabled?: boolean;
+  clickable?: boolean;
+  label: string;
+  maxWidth?: string;
+  variant?: ChipVariant;
+  leftComponent?: React.ReactNode;
+  rightComponent?: React.ReactNode;
+  className?: string;
+};
+
+const StyledContainer = styled.div<Partial<OwnProps>>`
+  align-items: center;
+
+  background-color: ${({ theme, variant }) =>
+    variant === ChipVariant.Highlighted
+      ? theme.background.transparent.light
+      : 'transparent'};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.font.color.light : theme.font.color.primary};
+  cursor: ${({ clickable, disabled, variant }) =>
+    disabled || variant === ChipVariant.Transparent
+      ? 'auto'
+      : clickable
+      ? 'pointer'
+      : 'auto'};
+  display: inline-flex;
+  gap: ${({ theme }) => theme.spacing(1)};
+
+  height: ${({ size }) => (size === ChipSize.Large ? '16px' : '12px')};
+  max-width: ${({ maxWidth }) => (maxWidth ? maxWidth : '200px')};
+
+  overflow: hidden;
+  padding: ${({ theme }) => theme.spacing(1)};
+  user-select: none;
+
+  :hover {
+    ${({ variant, theme, disabled }) => {
+      if (!disabled) {
+        return (
+          'background-color: ' +
+          (variant === ChipVariant.Highlighted
+            ? theme.background.transparent.medium
+            : variant === ChipVariant.Regular
+            ? theme.background.transparent.light
+            : 'transparent') +
+          ';'
+        );
+      }
+    }}
+  }
+  :active {
+    ${({ variant, theme, disabled }) => {
+      if (!disabled) {
+        return (
+          'background-color: ' +
+          (variant === ChipVariant.Highlighted
+            ? theme.background.transparent.strong
+            : variant === ChipVariant.Regular
+            ? theme.background.transparent.medium
+            : 'transparent') +
+          ';'
+        );
+      }
+    }}
+  }
+`;
+
+const StyledLabel = styled.span`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+`;
+
+export function Chip({
+  size = ChipSize.Small,
+  label,
+  disabled = false,
+  clickable = true,
+  variant = ChipVariant.Regular,
+  leftComponent,
+  rightComponent,
+  maxWidth,
+  className,
+}: OwnProps) {
+  return (
+    <StyledContainer
+      data-testid="chip"
+      clickable={clickable}
+      variant={variant}
+      size={size}
+      disabled={disabled}
+      className={className}
+    >
+      {leftComponent}
+      <StyledLabel>
+        <OverflowingTextWithTooltip text={label} />
+      </StyledLabel>
+      {rightComponent}
+    </StyledContainer>
+  );
+}

front/src/modules/ui/chip/components/EntityChip.tsx

@@ -1,122 +1,53 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Theme } from '@emotion/react';
-import styled from '@emotion/styled';
 
 import { Avatar, AvatarType } from '@/users/components/Avatar';
 import { isNonEmptyString } from '~/utils/isNonEmptyString';
 
-import { OverflowingTextWithTooltip } from '../../tooltip/OverflowingTextWithTooltip';
-
-export enum ChipVariant {
-  opaque = 'opaque',
-  transparent = 'transparent',
-}
-
-const baseStyle = ({ theme }: { theme: Theme }) => `
-  align-items: center;
-  border-radius: ${theme.spacing(1)};
-  color: ${theme.font.color.primary};
-  display: inline-flex;
-  gap: ${theme.spacing(1)};
-  height: 12px;
-  overflow: hidden;
-  padding: ${theme.spacing(1)};
-  text-decoration: none;
- 
-  img {
-    border-radius: ${theme.border.radius.rounded};
-    height: 14px;
-    object-fit: cover;
-    width: 14px;
-  }
-
-  white-space: nowrap;
-`;
-
-const StyledContainerLink = styled.div<{ variant: string }>`
-  ${baseStyle}
-  background-color: ${({ theme, variant }) =>
-    variant === ChipVariant.opaque ? theme.background.tertiary : 'transparent'};
-  :hover {
-    background-color: ${({ variant, theme }) =>
-      variant === ChipVariant.opaque
-        ? theme.background.quaternary
-        : theme.background.transparent.light};
-  }
-`;
-
-const StyledContainerReadOnly = styled.div`
-  ${baseStyle}
-`;
-
-const StyledName = styled.span`
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-`;
+import { Chip, ChipVariant } from './Chip';
 
 type OwnProps = {
-  linkToEntity: string;
+  linkToEntity?: string;
   entityId: string;
   name: string;
-  picture?: string;
-  clickable?: boolean;
+  pictureUrl?: string;
   avatarType?: AvatarType;
-  variant?: ChipVariant;
 };
 
 export function EntityChip({
   linkToEntity,
   entityId,
   name,
-  picture,
-  clickable,
+  pictureUrl,
   avatarType = 'rounded',
-  variant = ChipVariant.opaque,
 }: OwnProps) {
   const navigate = useNavigate();
 
   function handleLinkClick(event: React.MouseEvent<HTMLDivElement>) {
     event.preventDefault();
     event.stopPropagation();
-
-    navigate(linkToEntity);
+    if (linkToEntity) {
+      navigate(linkToEntity);
+    }
   }
 
-  return clickable && linkToEntity ? (
-    <StyledContainerLink
-      data-testid="entity-chip"
-      onClick={handleLinkClick}
-      variant={variant}
-    >
-      {isNonEmptyString(name) && (
-        <Avatar
-          avatarUrl={picture}
-          colorId={entityId}
-          placeholder={name}
-          size={14}
-          type={avatarType}
-        />
-      )}
-      <StyledName>
-        <OverflowingTextWithTooltip text={name} />
-      </StyledName>
-    </StyledContainerLink>
+  return isNonEmptyString(name) ? (
+    <div onClick={handleLinkClick}>
+      <Chip
+        label={name}
+        variant={linkToEntity ? ChipVariant.Highlighted : ChipVariant.Regular}
+        leftComponent={
+          <Avatar
+            avatarUrl={pictureUrl}
+            colorId={entityId}
+            placeholder={name}
+            size={14}
+            type={avatarType}
+          />
+        }
+      />
+    </div>
   ) : (
-    <StyledContainerReadOnly data-testid="entity-chip">
-      {isNonEmptyString(name) && (
-        <Avatar
-          avatarUrl={picture}
-          colorId={entityId}
-          placeholder={name}
-          size={14}
-          type={avatarType}
-        />
-      )}
-      <StyledName>
-        <OverflowingTextWithTooltip text={name} />
-      </StyledName>
-    </StyledContainerReadOnly>
+    <></>
   );
 }

front/src/modules/ui/chip/components/__stories__/Chip.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+import { ExhaustiveComponentDecorator } from '~/testing/decorators/ExhaustiveComponentDecorator';
+
+import { Chip, ChipSize, ChipVariant } from '../Chip';
+
+const meta: Meta<typeof Chip> = {
+  title: 'UI/Chip/Chip',
+  component: Chip,
+};
+
+export default meta;
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+  args: {
+    label: 'Chip test',
+    size: ChipSize.Small,
+    variant: ChipVariant.Highlighted,
+    clickable: true,
+    maxWidth: '200px',
+  },
+  decorators: [ComponentDecorator],
+};
+
+export const All: Story = {
+  args: { size: ChipSize.Large, clickable: true, label: 'Hello' },
+  argTypes: {
+    size: { control: false },
+    variant: { control: false },
+    disabled: { control: false },
+    className: { control: false },
+    rightComponent: { control: false },
+    leftComponent: { control: false },
+  },
+  parameters: {
+    pseudo: { hover: ['.hover'], active: ['.active'] },
+    variants: [
+      ChipVariant.Highlighted,
+      ChipVariant.Regular,
+      ChipVariant.Transparent,
+    ],
+    sizes: [ChipSize.Small, ChipSize.Large],
+    states: ['default', 'hover', 'active', 'disabled'],
+  },
+  decorators: [ExhaustiveComponentDecorator],
+};

front/src/modules/ui/chip/components/__stories__/EntityChip.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
+
+import { EntityChip } from '../EntityChip';
+
+const meta: Meta<typeof EntityChip> = {
+  title: 'UI/Chip/EntityChip',
+  component: EntityChip,
+  decorators: [ComponentWithRouterDecorator],
+  args: {
+    name: 'Entity name',
+    linkToEntity: '/entity-link',
+    avatarType: 'squared',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof EntityChip>;
+
+export const Default: Story = {};

front/src/modules/ui/color-scheme/components/__stories__/ColorSchemeCard.stories.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ColorSchemeCard } from '../ColorSchemeCard';
 

front/src/modules/ui/dropdown/components/__stories__/DropdownMenu.stories.tsx

@@ -4,7 +4,7 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { IconPlus } from '@/ui/icon/index';
 import { Avatar } from '@/users/components/Avatar';
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { DropdownMenuSkeletonItem } from '../../../relation-picker/components/skeletons/DropdownMenuSkeletonItem';
 import { DropdownMenu } from '../DropdownMenu';

front/src/modules/ui/editable-field/variants/components/__stories__/DateEditableField.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCalendar } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { DateEditableField } from '../DateEditableField';
 

front/src/modules/ui/editable-field/variants/components/__stories__/NumberEditableField.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconCurrencyDollar } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { NumberEditableField } from '../NumberEditableField';
 

front/src/modules/ui/editable-field/variants/components/__stories__/PhoneEditableField.stories.tsx

@@ -2,7 +2,7 @@ import { BrowserRouter } from 'react-router-dom';
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconPhone } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { PhoneEditableField } from '../PhoneEditableField';
 

front/src/modules/ui/editable-field/variants/components/__stories__/TextEditableField.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { IconUser } from '@tabler/icons-react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { TextEditableField } from '../TextEditableField';
 

front/src/modules/ui/input/components/__stories__/AutosizeTextInput.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { AutosizeTextInput } from '../AutosizeTextInput';
 

front/src/modules/ui/input/components/__stories__/TextInput.stories.tsx

@@ -4,7 +4,7 @@ import { jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { TextInput } from '../TextInput';
 

front/src/modules/ui/link/components/__stories__/PrimaryLink.stories.tsx

@@ -3,7 +3,7 @@ import { expect, jest } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { PrimaryLink } from '../PrimaryLink';
 

front/src/modules/ui/pill/components/__stories__/SoonPill.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { SoonPill } from '../SoonPill';
 

front/src/modules/ui/right-drawer/components/__stories__/RightDrawerTopBar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 import { graphqlMocks } from '~/testing/graphqlMocks';
 
 import { RightDrawerTopBar } from '../RightDrawerTopBar';

front/src/modules/ui/table/editable-cell/components/__stories__/EditableCellText.stories.tsx

@@ -2,10 +2,8 @@ import { expect } from '@storybook/jest';
 import type { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/testing-library';
 
-import {
-  CellPositionDecorator,
-  ComponentDecorator,
-} from '~/testing/decorators';
+import { CellPositionDecorator } from '~/testing/decorators/CellPositionDecorator';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { EditableCellText } from '../../types/EditableCellText';
 

front/src/modules/ui/tag/components/__stories__/Tag.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { ComponentDecorator } from '~/testing/decorators';
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { Tag } from '../Tag';