Closes #2413 - Building a chrome extension for twenty to store person/company data into a workspace. (#3430)

* build: create a new vite project for chrome extension

* feat: configure theme per the frontend codebase for chrome extension

* feat: inject the add to twenty button into linkedin profile page

* feat: create the api key form ui and render it on the options page

* feat: inject the add to twenty button into linkedin company page

* feat: scrape required data from both the user profile and the company profile

* refactor: move modules into options because it is the only page using react for now

* fix: show add to twenty button without having to reload the single page application

* fix: extract domain of the business website instead of scrapping the industry type

* feat: store api key to local storage and open options page when trying to store data without setting a key

* feat: send data to the backend upon click and store it to the database

* fix: open options page upon clicking the extension icon

* fix: update terminology from user to person to match the codebase convention

* fix: adopt chrome extension to monorepo approach using nx and get the development server working

* fix: update vite config for build command to work per the requirement

* feat: add instructions in the readme file to install the extension for local testing

* fix: move server base url to a dotenv file and replace the hard-coded url

* feat: permit user to configure a custom route for the server from the options page

* fix: fetch api key and route from local storage and display on options page to inform users of their choices

* fix: move front base url to dotenv and replace the hard-coded url

* fix: remove the trailing slash from person and company linkedin username

* fix: improve code commenting to explain implementation somewhat better

* ci: introduce a workflow to build chrome extension to ensure it can be published

* fix: format files to display code in a consistent manner per the prettier configuration in codebase

* fix: improve the commenting significantly to explain important and hard-to-understand parts of the code

* fix: remove unused permissions from the manifest file for publishing to the chrome web store

* Add nx

* Fix vale

---------

Co-authored-by: Charles Bochet <charles@twenty.com>

packages/twenty-chrome-extension/src/options/modules/ui/input/components/TextInput.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+interface TextInputProps {
+  label?: string;
+  value: string;
+  onChange: (value: string) => void;
+  fullWidth?: boolean;
+  error?: string;
+  placeholder?: string;
+  icon?: React.ReactNode;
+}
+
+const StyledContainer = styled.div<{ fullWidth?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  width: ${({ fullWidth }) => (fullWidth ? `100%` : 'auto')};
+  margin-bottom: ${({ theme }) => theme.spacing(4)};
+`;
+
+const StyledLabel = styled.span`
+  color: ${({ theme }) => theme.font.color.light};
+  font-size: ${({ theme }) => theme.font.size.xs};
+  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  margin-bottom: ${({ theme }) => theme.spacing(1)};
+  text-transform: uppercase;
+`;
+
+const StyledInputContainer = styled.div`
+  display: flex;
+  align-items: center;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px;
+`;
+
+const StyledIcon = styled.span`
+  margin-right: 8px;
+`;
+
+const StyledInput = styled.input`
+  flex: 1;
+  border: none;
+  outline: none;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+
+  &::placeholder {
+    color: #aaa;
+  }
+`;
+
+const StyledErrorHelper = styled.div`
+  color: #ff0000;
+  font-size: 12px;
+  padding: 5px 0;
+`;
+
+const TextInput: React.FC<TextInputProps> = ({
+  label,
+  value,
+  onChange,
+  fullWidth,
+  error,
+  placeholder,
+  icon,
+}) => {
+  return (
+    <StyledContainer fullWidth={fullWidth}>
+      {label && <StyledLabel>{label}</StyledLabel>}
+      <StyledInputContainer>
+        {icon && <StyledIcon>{icon}</StyledIcon>}
+        <StyledInput
+          type="text"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder={placeholder}
+        />
+      </StyledInputContainer>
+      {error && <StyledErrorHelper>{error}</StyledErrorHelper>}
+    </StyledContainer>
+  );
+};
+
+export { TextInput };