289 on opportunities page i see person and company card layout read only (#293)

* feature: create boardCard component

* test: add snapshot for BoardCards

* feature: fix typename of company

* feature: add max width on BoardItem

* feature: design CompanyBoardCard

* feature: Add People picture and name

* feature: design PeopleCard

* feature: fix font weight for card header

* test: fix storybook for board

* test: add unit test for column optimistic renderer

front/src/modules/ui/components/board/Board.tsx

@@ -8,10 +8,7 @@ export const StyledBoard = styled.div`
 `;
 
 export type BoardItemKey = `item-${number | string}`;
-export interface Item {
-  id: string;
-  content?: string;
-}
+export type Item = any & { id: string };
 export interface Items {
   [key: string]: Item;
 }

front/src/modules/ui/components/board/BoardItem.tsx

@@ -7,12 +7,12 @@ const StyledCard = styled.div`
   border-radius: ${({ theme }) => theme.borderRadius};
   box-shadow: ${({ theme }) => theme.boxShadow};
   margin-bottom: ${({ theme }) => theme.spacing(2)};
-  padding: ${({ theme }) => theme.spacing(2)};
+  max-width: 300px;
 `;
 
 type BoardCardProps = {
   children: React.ReactNode;
-  draggableProvided: DraggableProvided;
+  draggableProvided?: DraggableProvided;
 };
 
 export const BoardItem = ({ children, draggableProvided }: BoardCardProps) => {

front/src/modules/ui/components/board/__tests__/Board.test.ts

@@ -0,0 +1,55 @@
+import { DropResult } from '@hello-pangea/dnd';
+
+import { BoardItemKey, getOptimisticlyUpdatedBoard } from '../Board';
+
+describe('getOptimisticlyUpdatedBoard', () => {
+  it('should return a new board with the updated cell', () => {
+    const initialColumn1: BoardItemKey[] = ['item-1', 'item-2', 'item-3'];
+    const initialColumn2: BoardItemKey[] = ['item-4', 'item-5'];
+
+    const finalColumn1: BoardItemKey[] = ['item-2', 'item-3'];
+    const finalColumn2: BoardItemKey[] = ['item-4', 'item-1', 'item-5'];
+
+    const dropResult = {
+      source: {
+        droppableId: 'column-1',
+        index: 0,
+      },
+      destination: {
+        droppableId: 'column-2',
+        index: 1,
+      },
+    } as DropResult;
+
+    const initialBoard = [
+      {
+        id: 'column-1',
+        title: 'My Column',
+        itemKeys: initialColumn1,
+      },
+      {
+        id: 'column-2',
+        title: 'My Column',
+        itemKeys: initialColumn2,
+      },
+    ];
+
+    const updatedBoard = getOptimisticlyUpdatedBoard(initialBoard, dropResult);
+
+    const finalBoard = [
+      {
+        id: 'column-1',
+        title: 'My Column',
+        itemKeys: finalColumn1,
+      },
+      {
+        id: 'column-2',
+        title: 'My Column',
+        itemKeys: finalColumn2,
+      },
+    ];
+
+    expect(updatedBoard).toEqual(finalBoard);
+    expect(updatedBoard).not.toBe(initialBoard);
+  });
+});

front/src/modules/ui/components/table/EntityTable.tsx

@@ -24,7 +24,7 @@ import { currentRowSelectionState } from '../../tables/states/rowSelectionState'
 import { TableHeader } from './table-header/TableHeader';
 
 type OwnProps<
-  TData extends { id: string; __typename: 'companies' | 'people' },
+  TData extends { id: string; __typename: 'Company' | 'people' },
   SortField,
 > = {
   data: Array<TData>;
@@ -109,7 +109,7 @@ const StyledRow = styled.tr<{ selected: boolean }>`
 `;
 
 export function EntityTable<
-  TData extends { id: string; __typename: 'companies' | 'people' },
+  TData extends { id: string; __typename: 'Company' | 'people' },
   SortField,
 >({
   data,