Reorganize frontend and install Craco to alias modules (#190)

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+
+export type CompanyChipPropsType = {
+  name: string;
+  picture?: string;
+};
+
+const StyledContainer = styled.span`
+  background-color: ${(props) => props.theme.tertiaryBackground};
+  border-radius: ${(props) => props.theme.spacing(1)};
+  color: ${(props) => props.theme.text80};
+  display: inline-flex;
+  align-items: center;
+  padding: ${(props) => props.theme.spacing(1)};
+  gap: ${(props) => props.theme.spacing(1)};
+
+  :hover {
+    filter: brightness(95%);
+  }
+
+  img {
+    height: 14px;
+    width: 14px;
+    object-fit: cover;
+  }
+`;
+
+function CompanyChip({ name, picture }: CompanyChipPropsType) {
+  return (
+    <StyledContainer data-testid="company-chip">
+      {picture && (
+        <img
+          data-testid="company-chip-image"
+          src={picture?.toString()}
+          alt={`${name}-company-logo`}
+        />
+      )}
+      {name}
+    </StyledContainer>
+  );
+}
+
+export default CompanyChip;

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

@@ -0,0 +1,42 @@
+import { useOpenCommentRightDrawer } from '@/comments/hooks/useOpenCommentRightDrawer';
+import EditableChip from '@/ui/components/editable-cell/EditableChip';
+import { getLogoUrlFromDomainName } from '@/utils/utils';
+
+import { Company } from '../interfaces/company.interface';
+import { updateCompany } from '../services';
+
+import CompanyChip from './CompanyChip';
+
+type OwnProps = {
+  company: Company;
+};
+
+export function CompanyEditableNameChipCell({ company }: OwnProps) {
+  const openCommentRightDrawer = useOpenCommentRightDrawer();
+
+  function handleCommentClick() {
+    openCommentRightDrawer([
+      {
+        type: 'Company',
+        id: company.id,
+      },
+    ]);
+  }
+
+  return (
+    <EditableChip
+      value={company.name || ''}
+      placeholder="Name"
+      picture={getLogoUrlFromDomainName(company.domainName)}
+      changeHandler={(value: string) => {
+        updateCompany({
+          ...company,
+          name: value,
+        });
+      }}
+      ChipComponent={CompanyChip}
+      commentCount={12}
+      onCommentClick={handleCommentClick}
+    />
+  );
+}