Refactor/new menu item (#1448)

* wip

* finished

* Added disabled

* Fixed disabled

* Finished cleaning

* Minor fixes from merge

* Added docs

* Added PascalCase

* Fix from review

* Fixes from merge

* Fix lint

* Fixed storybook tests

front/src/modules/companies/components/CompanyBoardCard.tsx

@@ -167,7 +167,7 @@ export function CompanyBoardCard() {
                       value={{
                         key: viewField.key,
                         name: viewField.name,
-                        icon: viewField.icon,
+                        Icon: viewField.Icon,
                         type: viewField.metadata.type,
                         metadata: viewField.metadata,
                       }}

front/src/modules/companies/components/CompanyProgressPicker.tsx

@@ -1,11 +1,9 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
-import { useTheme } from '@emotion/react';
 import { useRecoilState } from 'recoil';
 
 import { currentPipelineState } from '@/pipeline/states/currentPipelineState';
 import { DropdownMenuHeader } from '@/ui/dropdown/components/DropdownMenuHeader';
 import { DropdownMenuInput } from '@/ui/dropdown/components/DropdownMenuInput';
-import { DropdownMenuItem } from '@/ui/dropdown/components/DropdownMenuItem';
 import { StyledDropdownMenu } from '@/ui/dropdown/components/StyledDropdownMenu';
 import { StyledDropdownMenuItemsContainer } from '@/ui/dropdown/components/StyledDropdownMenuItemsContainer';
 import { StyledDropdownMenuSeparator } from '@/ui/dropdown/components/StyledDropdownMenuSeparator';
@@ -13,6 +11,7 @@ import { IconChevronDown } from '@/ui/icon';
 import { SingleEntitySelectBase } from '@/ui/input/relation-picker/components/SingleEntitySelectBase';
 import { useEntitySelectSearch } from '@/ui/input/relation-picker/hooks/useEntitySelectSearch';
 import { EntityForSelect } from '@/ui/input/relation-picker/types/EntityForSelect';
+import { MenuItem } from '@/ui/menu-item/components/MenuItem';
 import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope';
 
 import { useFilteredSearchCompanyQuery } from '../hooks/useFilteredSearchCompanyQuery';
@@ -47,8 +46,6 @@ export function CompanyProgressPicker({
     string | null
   >(null);
 
-  const theme = useTheme();
-
   const [currentPipeline] = useRecoilState(currentPipelineState);
 
   const currentPipelineStages = useMemo(
@@ -89,22 +86,21 @@ export function CompanyProgressPicker({
       {isProgressSelectionUnfolded ? (
         <StyledDropdownMenuItemsContainer>
           {currentPipelineStages.map((pipelineStage, index) => (
-            <DropdownMenuItem
+            <MenuItem
               key={pipelineStage.id}
-              data-testid={`select-pipeline-stage-${index}`}
+              testId={`select-pipeline-stage-${index}`}
               onClick={() => {
                 handlePipelineStageChange(pipelineStage.id);
               }}
-            >
-              {pipelineStage.name}
-            </DropdownMenuItem>
+              text={pipelineStage.name}
+            />
           ))}
         </StyledDropdownMenuItemsContainer>
       ) : (
         <>
           <DropdownMenuHeader
             data-testid="selected-pipeline-stage"
-            endIcon={<IconChevronDown size={theme.icon.size.md} />}
+            EndIcon={IconChevronDown}
             onClick={() => setIsProgressSelectionUnfolded(true)}
           >
             {selectedPipelineStage?.name}

front/src/modules/companies/constants/companiesAvailableColumnDefinitions.tsx

@@ -29,7 +29,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'name',
       name: 'Name',
-      icon: <IconBuildingSkyscraper />,
+      Icon: IconBuildingSkyscraper,
       size: 180,
       index: 0,
       metadata: {
@@ -43,7 +43,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'domainName',
       name: 'URL',
-      icon: <IconLink />,
+      Icon: IconLink,
       size: 100,
       index: 1,
       metadata: {
@@ -56,7 +56,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'accountOwner',
       name: 'Account Owner',
-      icon: <IconUserCircle />,
+      Icon: IconUserCircle,
       size: 150,
       index: 2,
       metadata: {
@@ -69,7 +69,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'createdAt',
       name: 'Creation',
-      icon: <IconCalendarEvent />,
+      Icon: IconCalendarEvent,
       size: 150,
       index: 3,
       metadata: {
@@ -81,7 +81,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'employees',
       name: 'Employees',
-      icon: <IconUsers />,
+      Icon: IconUsers,
       size: 150,
       index: 4,
       metadata: {
@@ -94,7 +94,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'linkedin',
       name: 'LinkedIn',
-      icon: <IconBrandLinkedin />,
+      Icon: IconBrandLinkedin,
       size: 170,
       index: 5,
       metadata: {
@@ -107,7 +107,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'address',
       name: 'Address',
-      icon: <IconMap />,
+      Icon: IconMap,
       size: 170,
       index: 6,
       metadata: {
@@ -120,7 +120,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'idealCustomerProfile',
       name: 'ICP',
-      icon: <IconTarget />,
+      Icon: IconTarget,
       size: 150,
       index: 7,
       metadata: {
@@ -132,7 +132,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'annualRecurringRevenue',
       name: 'ARR',
-      icon: <IconMoneybag />,
+      Icon: IconMoneybag,
       size: 150,
       index: 8,
       metadata: {
@@ -143,7 +143,7 @@ export const companiesAvailableColumnDefinitions: ColumnDefinition<ViewFieldMeta
     {
       key: 'xUrl',
       name: 'Twitter',
-      icon: <IconBrandX />,
+      Icon: IconBrandX,
       size: 150,
       index: 9,
       metadata: {

front/src/modules/companies/hooks/useCompanyTableContextMenuEntries.tsx

@@ -26,19 +26,19 @@ export function useCompanyTableContextMenuEntries() {
       setContextMenuEntries([
         <ContextMenuEntry
           label="Note"
-          icon={<IconNotes size={16} />}
+          Icon={IconNotes}
           onClick={() => handleButtonClick(ActivityType.Note)}
           key="note"
         />,
         <ContextMenuEntry
           label="Task"
-          icon={<IconCheckbox size={16} />}
+          Icon={IconCheckbox}
           onClick={() => handleButtonClick(ActivityType.Task)}
           key="task"
         />,
         <ContextMenuEntry
           label="Delete"
-          icon={<IconTrash size={16} />}
+          Icon={IconTrash}
           accent="danger"
           onClick={() => deleteSelectedCompanies()}
           key="delete"

front/src/modules/companies/hooks/useUpdateCompanyBoardColumns.ts

@@ -5,6 +5,7 @@ import { boardCardIdsByColumnIdFamilyState } from '@/ui/board/states/boardCardId
 import { boardColumnsState } from '@/ui/board/states/boardColumnsState';
 import { BoardColumnDefinition } from '@/ui/board/types/BoardColumnDefinition';
 import { genericEntitiesFamilyState } from '@/ui/editable-field/states/genericEntitiesFamilyState';
+import { isThemeColor } from '@/ui/theme/utils/castStringAsThemeColor';
 import { Pipeline } from '~/generated/graphql';
 import { isDeeplyEqual } from '~/utils/isDeeplyEqual';
 
@@ -97,12 +98,22 @@ export function useUpdateCompanyBoard() {
         });
 
         const newBoardColumns: BoardColumnDefinition[] =
-          orderedPipelineStages?.map((pipelineStage) => ({
-            id: pipelineStage.id,
-            title: pipelineStage.name,
-            colorCode: pipelineStage.color,
-            index: pipelineStage.index ?? 0,
-          }));
+          orderedPipelineStages?.map((pipelineStage) => {
+            if (!isThemeColor(pipelineStage.color)) {
+              console.warn(
+                `Color ${pipelineStage.color} is not recognized in useUpdateCompanyBoard.`,
+              );
+            }
+
+            return {
+              id: pipelineStage.id,
+              title: pipelineStage.name,
+              colorCode: isThemeColor(pipelineStage.color)
+                ? pipelineStage.color
+                : undefined,
+              index: pipelineStage.index ?? 0,
+            };
+          });
 
         if (!isDeeplyEqual(currentBoardColumns, newBoardColumns)) {
           set(boardColumnsState, newBoardColumns);

front/src/modules/companies/utils/fieldsForCompany.tsx

@@ -11,7 +11,7 @@ import {
 
 export const fieldsForCompany = [
   {
-    icon: <IconBuildingSkyscraper />,
+    icon: IconBuildingSkyscraper,
     label: 'Name',
     key: 'name',
     alternateMatches: ['name', 'company name', 'company'],
@@ -21,7 +21,7 @@ export const fieldsForCompany = [
     example: 'Tim',
   },
   {
-    icon: <IconMail />,
+    icon: IconMail,
     label: 'Domain name',
     key: 'domainName',
     alternateMatches: ['domain', 'domain name'],
@@ -31,7 +31,7 @@ export const fieldsForCompany = [
     example: 'apple.dev',
   },
   {
-    icon: <IconBrandLinkedin />,
+    icon: IconBrandLinkedin,
     label: 'Linkedin URL',
     key: 'linkedinUrl',
     alternateMatches: ['linkedIn', 'linkedin', 'linkedin url'],
@@ -41,7 +41,7 @@ export const fieldsForCompany = [
     example: 'https://www.linkedin.com/in/apple',
   },
   {
-    icon: <IconMoneybag />,
+    icon: IconMoneybag,
     label: 'ARR',
     key: 'annualRecurringRevenue',
     alternateMatches: [
@@ -64,7 +64,7 @@ export const fieldsForCompany = [
     example: '1000000',
   },
   {
-    icon: <IconTarget />,
+    icon: IconTarget,
     label: 'ICP',
     key: 'idealCustomerProfile',
     alternateMatches: [
@@ -86,7 +86,7 @@ export const fieldsForCompany = [
     example: 'true/false',
   },
   {
-    icon: <IconBrandX />,
+    icon: IconBrandX,
     label: 'x URL',
     key: 'xUrl',
     alternateMatches: ['x', 'twitter', 'twitter url', 'x url'],
@@ -96,7 +96,7 @@ export const fieldsForCompany = [
     example: 'https://x.com/tim_cook',
   },
   {
-    icon: <IconMap />,
+    icon: IconMap,
     label: 'Address',
     key: 'address',
     fieldType: {
@@ -105,7 +105,7 @@ export const fieldsForCompany = [
     example: 'Maple street',
   },
   {
-    icon: <IconUsers />,
+    icon: IconUsers,
     label: 'Employees',
     key: 'employees',
     alternateMatches: ['employees', 'total employees', 'number of employees'],