Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

docs/docs/developer/frontend/style-guide.mdx

@@ -100,3 +100,36 @@ type MyType = {
 };
 ```
 
+## Styling
+
+### Use StyledComponents
+
+Components should be styled with StyledComponents.
+
+```tsx
+// ❌ Bad
+<div className="my-class">Hello World</div>
+```
+
+```tsx
+// ✅ Good
+const StyledTitle = styled.div`
+  color: red;
+`;
+```
+
+Styled components should be prefixed with "Styled" to differentiate them from "real" components.
+
+```tsx
+// ❌ Bad
+const Title = styled.div`
+  color: red;
+`;
+```
+
+```tsx
+// ✅ Good
+const StyledTitle = styled.div`
+  color: red;
+`;
+```

front/.eslintrc.js

@@ -48,6 +48,7 @@ module.exports = {
     'simple-import-sort/exports': 'error',
     'twenty/sort-css-properties-alphabetically': 'error',
     'twenty/no-hardcoded-colors': 'error',
+    'twenty/styled-components-prefixed-with-styled': 'error',
     'func-style':['error', 'declaration', { 'allowArrowFunctions': true }],
     "@typescript-eslint/no-unused-vars": "off",
     "no-unused-vars": "off",

front/src/modules/activities/components/ActivityBodyEditor.tsx

@@ -10,7 +10,7 @@ import { Activity, useUpdateActivityMutation } from '~/generated/graphql';
 
 import { ACTIVITY_UPDATE_FRAGMENT } from '../graphql/fragments/activityUpdateFragment';
 
-const BlockNoteStyledContainer = styled.div`
+const StyledBlockNoteStyledContainer = styled.div`
   width: 100%;
 `;
 
@@ -70,8 +70,8 @@ export function ActivityBodyEditor({ activity, onChange }: OwnProps) {
   });
 
   return (
-    <BlockNoteStyledContainer>
+    <StyledBlockNoteStyledContainer>
       <BlockEditor editor={editor} />
-    </BlockNoteStyledContainer>
+    </StyledBlockNoteStyledContainer>
   );
 }

front/src/modules/activities/table/components/__stories__/CommentChip.stories.tsx

@@ -15,7 +15,7 @@ const meta: Meta<typeof CommentChip> = {
 export default meta;
 type Story = StoryObj<typeof CommentChip>;
 
-const TestCellContainer = styled.div`
+const StyledTestCellContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.primary};
   display: flex;
@@ -51,10 +51,10 @@ export const InCellDefault: Story = {
   args: { count: 12 },
   decorators: [
     (Story) => (
-      <TestCellContainer>
+      <StyledTestCellContainer>
         <StyledFakeCellText>Fake short text</StyledFakeCellText>
         <Story />
-      </TestCellContainer>
+      </StyledTestCellContainer>
     ),
   ],
 };
@@ -63,12 +63,12 @@ export const InCellOverlappingBlur: Story = {
   ...InCellDefault,
   decorators: [
     (Story) => (
-      <TestCellContainer>
+      <StyledTestCellContainer>
         <StyledFakeCellText>
           Fake long text to demonstrate ellipsis
         </StyledFakeCellText>
         <Story />
-      </TestCellContainer>
+      </StyledTestCellContainer>
     ),
   ],
 };

front/src/modules/auth/sign-in-up/components/HorizontalSeparator.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-const Separator = styled.div`
+const StyledSeparator = styled.div`
   background-color: ${({ theme }) => theme.border.color.medium};
   height: 1px;
   margin-bottom: ${({ theme }) => theme.spacing(3)};
@@ -9,5 +9,5 @@ const Separator = styled.div`
 `;
 
 export function HorizontalSeparator(): JSX.Element {
-  return <Separator />;
+  return <StyledSeparator />;
 }

front/src/modules/companies/__stories__/CompanyChip.stories.tsx

@@ -11,11 +11,11 @@ const meta: Meta<typeof CompanyChip> = {
   component: CompanyChip,
   decorators: [
     (Story) => (
-      <TestCellContainer>
+      <StyledTestCellContainer>
         <BrowserRouter>
           <Story />
         </BrowserRouter>
-      </TestCellContainer>
+      </StyledTestCellContainer>
     ),
     ComponentDecorator,
   ],
@@ -24,7 +24,7 @@ const meta: Meta<typeof CompanyChip> = {
 export default meta;
 type Story = StoryObj<typeof CompanyChip>;
 
-const TestCellContainer = styled.div`
+const StyledTestCellContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.primary};
   display: flex;

front/src/modules/people/components/__stories__/PeopleChip.stories.tsx

@@ -6,7 +6,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { PersonChip } from '../PersonChip';
 
-const TestCellContainer = styled.div`
+const StyledTestCellContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.primary};
   display: flex;
@@ -22,11 +22,11 @@ const meta: Meta<typeof PersonChip> = {
   component: PersonChip,
   decorators: [
     (Story) => (
-      <TestCellContainer>
+      <StyledTestCellContainer>
         <BrowserRouter>
           <Story />
         </BrowserRouter>
-      </TestCellContainer>
+      </StyledTestCellContainer>
     ),
     ComponentDecorator,
   ],

front/src/modules/spreadsheet-import/components/ContinueButton.tsx

@@ -4,7 +4,7 @@ import { MainButton } from '@/ui/button/components/MainButton';
 import { Modal } from '@/ui/modal/components/Modal';
 import { CircularProgressBar } from '@/ui/progress-bar/components/CircularProgressBar';
 
-const Footer = styled(Modal.Footer)`
+const StyledFooter = styled(Modal.Footer)`
   height: 60px;
   justify-content: center;
   padding: 0px;
@@ -12,7 +12,7 @@ const Footer = styled(Modal.Footer)`
   padding-right: ${({ theme }) => theme.spacing(30)};
 `;
 
-const Button = styled(MainButton)`
+const StyledButton = styled(MainButton)`
   width: 200px;
 `;
 
@@ -27,11 +27,11 @@ export const ContinueButton = ({
   title,
   isLoading,
 }: ContinueButtonProps) => (
-  <Footer>
+  <StyledFooter>
-    <Button
+    <StyledButton
       icon={isLoading && <CircularProgressBar size={16} barWidth={2} />}
       title={title}
       onClick={!isLoading ? onContinue : undefined}
     />
-  </Footer>
+  </StyledFooter>
 );

front/src/modules/spreadsheet-import/components/Heading.tsx

@@ -6,20 +6,20 @@ export type Props = React.ComponentProps<'div'> & {
   description?: string;
 };
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
 
-const Title = styled.span`
+const StyledTitle = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.lg};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
   text-align: center;
 `;
 
-const Description = styled.span`
+const StyledDescription = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
@@ -29,9 +29,9 @@ const Description = styled.span`
 
 export function Heading({ title, description, ...props }: Props) {
   return (
-    <Container {...props}>
+    <StyledContainer {...props}>
-      <Title>{title}</Title>
+      <StyledTitle>{title}</StyledTitle>
-      {description && <Description>{description}</Description>}
+      {description && <StyledDescription>{description}</StyledDescription>}
-    </Container>
+    </StyledContainer>
   );
 }

front/src/modules/spreadsheet-import/components/MatchColumnSelect.tsx

@@ -25,7 +25,7 @@ import { AppTooltip } from '@/ui/tooltip/AppTooltip';
 import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 import { useUpdateEffect } from '~/hooks/useUpdateEffect';
 
-const DropdownItem = styled.div`
+const StyledDropdownItem = styled.div`
   align-items: center;
   background-color: ${({ theme }) => theme.background.tertiary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
@@ -42,7 +42,7 @@ const DropdownItem = styled.div`
   }
 `;
 
-const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
+const StyledDropdownLabel = styled.span<{ isPlaceholder: boolean }>`
   color: ${({ theme, isPlaceholder }) =>
     isPlaceholder ? theme.font.color.tertiary : theme.font.color.primary};
   display: flex;
@@ -53,7 +53,7 @@ const DropdownLabel = styled.span<{ isPlaceholder: boolean }>`
   padding-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const FloatingDropdown = styled.div`
+const StyledFloatingDropdown = styled.div`
   z-index: ${({ theme }) => theme.lastLayerZIndex};
 `;
 
@@ -147,7 +147,7 @@ export const MatchColumnSelect = ({
 
   return (
     <>
-      <DropdownItem
+      <StyledDropdownItem
         id={name}
         ref={(node) => {
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -158,14 +158,14 @@ export const MatchColumnSelect = ({
         onClick={handleDropdownItemClick}
       >
         {renderIcon(value?.icon)}
-        <DropdownLabel isPlaceholder={!value?.label}>
+        <StyledDropdownLabel isPlaceholder={!value?.label}>
           {value?.label ?? placeholder}
-        </DropdownLabel>
+        </StyledDropdownLabel>
         <IconChevronDown size={16} color={theme.font.color.tertiary} />
-      </DropdownItem>
+      </StyledDropdownItem>
       {isOpen &&
         createPortal(
-          <FloatingDropdown ref={refs.setFloating} style={floatingStyles}>
+          <StyledFloatingDropdown ref={refs.setFloating} style={floatingStyles}>
             <DropdownMenu
               ref={dropdownContainerRef}
               width={dropdownItemRef.current?.clientWidth}
@@ -210,7 +210,7 @@ export const MatchColumnSelect = ({
                 )}
               </DropdownMenuItemsContainer>
             </DropdownMenu>
-          </FloatingDropdown>,
+          </StyledFloatingDropdown>,
           document.body,
         )}
     </>

front/src/modules/spreadsheet-import/components/ModalCloseButton.tsx

@@ -6,7 +6,7 @@ import { IconButton } from '@/ui/button/components/IconButton';
 import { useDialog } from '@/ui/dialog/hooks/useDialog';
 import { IconX } from '@/ui/icon/index';
 
-const CloseButtonContainer = styled.div`
+const StyledCloseButtonContainer = styled.div`
   align-items: center;
   aspect-ratio: 1;
   display: flex;
@@ -39,12 +39,12 @@ export const ModalCloseButton = ({ onClose }: ModalCloseButtonProps) => {
 
   return (
     <>
-      <CloseButtonContainer>
+      <StyledCloseButtonContainer>
         <IconButton
           icon={<IconX size={16} color={theme.font.color.tertiary} />}
           onClick={handleClose}
         />
-      </CloseButtonContainer>
+      </StyledCloseButtonContainer>
     </>
   );
 };

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/ColumnGrid.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import type { Columns } from '../MatchColumnsStep';
 
-const GridContainer = styled.div`
+const StyledGridContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -12,7 +12,7 @@ const GridContainer = styled.div`
   width: 100%;
 `;
 
-const Grid = styled.div`
+const StyledGrid = styled.div`
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
   box-sizing: border-box;
@@ -26,7 +26,7 @@ type HeightProps = {
   height?: `${number}px`;
 };
 
-const GridRow = styled.div<HeightProps>`
+const StyledGridRow = styled.div<HeightProps>`
   box-sizing: border-box;
   display: flex;
   flex-direction: row;
@@ -37,7 +37,7 @@ type PositionProps = {
   position: 'left' | 'right';
 };
 
-const GridCell = styled.div<PositionProps>`
+const StyledGridCell = styled.div<PositionProps>`
   align-items: center;
   box-sizing: border-box;
   display: flex;
@@ -59,7 +59,7 @@ const GridCell = styled.div<PositionProps>`
   }};
 `;
 
-const GridHeader = styled.div<PositionProps>`
+const StyledGridHeader = styled.div<PositionProps>`
   align-items: center;
   background-color: ${({ theme }) => theme.background.tertiary};
   box-sizing: border-box;
@@ -98,29 +98,31 @@ export const ColumnGrid = <T extends string>({
 }: ColumnGridProps<T>) => {
   return (
     <>
-      <GridContainer>
+      <StyledGridContainer>
-        <Grid>
+        <StyledGrid>
-          <GridRow height="29px">
+          <StyledGridRow height="29px">
-            <GridHeader position="left">Imported data</GridHeader>
+            <StyledGridHeader position="left">Imported data</StyledGridHeader>
-            <GridHeader position="right">Twenty fields</GridHeader>
+            <StyledGridHeader position="right">Twenty fields</StyledGridHeader>
-          </GridRow>
+          </StyledGridRow>
           {columns.map((column, index) => {
             const userColumn = renderUserColumn(columns, index);
             const templateColumn = renderTemplateColumn(columns, index);
 
             if (React.isValidElement(userColumn)) {
               return (
-                <GridRow key={index}>
+                <StyledGridRow key={index}>
-                  <GridCell position="left">{userColumn}</GridCell>
+                  <StyledGridCell position="left">{userColumn}</StyledGridCell>
-                  <GridCell position="right">{templateColumn}</GridCell>
+                  <StyledGridCell position="right">
-                </GridRow>
+                    {templateColumn}
+                  </StyledGridCell>
+                </StyledGridRow>
               );
             }
 
             return null;
           })}
-        </Grid>
+        </StyledGrid>
-      </GridContainer>
+      </StyledGridContainer>
     </>
   );
 };

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/SubMatchingSelect.tsx

@@ -11,12 +11,12 @@ import type {
   MatchedSelectOptionsColumn,
 } from '../MatchColumnsStep';
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   padding-bottom: ${({ theme }) => theme.spacing(1)};
   padding-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-const SelectLabel = styled.span`
+const StyledSelectLabel = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -40,8 +40,8 @@ export const SubMatchingSelect = <T extends string>({
   const value = options.find((opt) => opt.value === option.value);
 
   return (
-    <Container>
+    <StyledContainer>
-      <SelectLabel>{option.entry}</SelectLabel>
+      <StyledSelectLabel>{option.entry}</StyledSelectLabel>
       <MatchColumnSelect
         value={value}
         placeholder="Select..."
@@ -51,6 +51,6 @@ export const SubMatchingSelect = <T extends string>({
         options={options}
         name={option.entry}
       />
-    </Container>
+    </StyledContainer>
   );
 };

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/TemplateColumn.tsx

@@ -18,14 +18,14 @@ import { ColumnType } from '../MatchColumnsStep';
 
 import { SubMatchingSelect } from './SubMatchingSelect';
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   min-height: 10px;
   width: 100%;
 `;
 
-const AccordionButton = styled(ChakraAccordionButton)`
+const StyledAccordionButton = styled(ChakraAccordionButton)`
   align-items: center;
   background-color: ${({ theme }) => theme.accent.secondary};
   border: none;
@@ -46,12 +46,12 @@ const AccordionButton = styled(ChakraAccordionButton)`
   }
 `;
 
-const AccordionContainer = styled.div`
+const StyledAccordionContainer = styled.div`
   display: flex;
   width: 100%;
 `;
 
-const AccordionLabel = styled.span`
+const StyledAccordionLabel = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
   flex: 1;
@@ -123,7 +123,7 @@ export const TemplateColumn = <T extends string>({
   );
 
   return (
-    <Container>
+    <StyledContainer>
       <MatchColumnSelect
         placeholder="Select column..."
         value={isIgnored ? ignoreValue : selectValue}
@@ -132,15 +132,15 @@ export const TemplateColumn = <T extends string>({
         name={column.header}
       />
       {isSelect && (
-        <AccordionContainer>
+        <StyledAccordionContainer>
           <Accordion allowMultiple width="100%">
             <AccordionItem border="none" py={1}>
-              <AccordionButton data-testid="accordion-button">
+              <StyledAccordionButton data-testid="accordion-button">
-                <AccordionLabel>
+                <StyledAccordionLabel>
                   {getAccordionTitle<T>(fields, column)}
-                </AccordionLabel>
+                </StyledAccordionLabel>
                 <AccordionIcon as={IconChevronDown} />
-              </AccordionButton>
+              </StyledAccordionButton>
               <AccordionPanel pb={4} pr={3} display="flex" flexDir="column">
                 {column.matchedOptions.map((option) => (
                   <SubMatchingSelect
@@ -153,8 +153,8 @@ export const TemplateColumn = <T extends string>({
               </AccordionPanel>
             </AccordionItem>
           </Accordion>
-        </AccordionContainer>
+        </StyledAccordionContainer>
       )}
-    </Container>
+    </StyledContainer>
   );
 };

front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/components/UserTableColumn.tsx

@@ -5,13 +5,13 @@ import { assertNotNull } from '~/utils/assert';
 
 import type { Column } from '../MatchColumnsStep';
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
 `;
 
-const Value = styled.span`
+const StyledValue = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -20,7 +20,7 @@ const Value = styled.span`
   white-space: nowrap;
 `;
 
-const Example = styled.span`
+const StyledExample = styled.span`
   color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -42,9 +42,9 @@ export const UserTableColumn = <T extends string>({
   const entry = entries.find(assertNotNull);
 
   return (
-    <Container>
+    <StyledContainer>
-      <Value>{header}</Value>
+      <StyledValue>{header}</StyledValue>
-      {entry && <Example>{`ex: ${entry}`}</Example>}
+      {entry && <StyledExample>{`ex: ${entry}`}</StyledExample>}
-    </Container>
+    </StyledContainer>
   );
 };

front/src/modules/spreadsheet-import/steps/components/SelectHeaderStep/SelectHeaderStep.tsx

@@ -12,7 +12,7 @@ const StyledHeading = styled(Heading)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
 `;
 
-const TableContainer = styled.div`
+const StyledTableContainer = styled.div`
   display: flex;
   flex-grow: 1;
   height: 0px;
@@ -42,13 +42,13 @@ export const SelectHeaderStep = ({ data, onContinue }: SelectHeaderProps) => {
     <>
       <Modal.Content>
         <StyledHeading title="Select header row" />
-        <TableContainer>
+        <StyledTableContainer>
           <SelectHeaderTable
             data={data}
             selectedRows={selectedRows}
             setSelectedRows={setSelectedRows}
           />
-        </TableContainer>
+        </StyledTableContainer>
       </Modal.Content>
       <ContinueButton
         onContinue={handleContinue}

front/src/modules/spreadsheet-import/steps/components/SelectSheetStep/SelectSheetStep.tsx

@@ -7,7 +7,7 @@ import { Radio } from '@/ui/input/radio/components/Radio';
 import { RadioGroup } from '@/ui/input/radio/components/RadioGroup';
 import { Modal } from '@/ui/modal/components/Modal';
 
-const Content = styled(Modal.Content)`
+const StyledContent = styled(Modal.Content)`
   align-items: center;
 `;
 
@@ -15,7 +15,7 @@ const StyledHeading = styled(Heading)`
   margin-bottom: ${({ theme }) => theme.spacing(8)};
 `;
 
-const RadioContainer = styled.div`
+const StyledRadioContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -46,16 +46,16 @@ export const SelectSheetStep = ({
 
   return (
     <>
-      <Content>
+      <StyledContent>
         <StyledHeading title="Select the sheet to use" />
-        <RadioContainer>
+        <StyledRadioContainer>
           <RadioGroup onValueChange={(value) => setValue(value)} value={value}>
             {sheetNames.map((sheetName) => (
               <Radio value={sheetName} key={sheetName} />
             ))}
           </RadioGroup>
-        </RadioContainer>
+        </StyledRadioContainer>
-      </Content>
+      </StyledContent>
       <ContinueButton
         isLoading={isLoading}
         onContinue={() => handleOnContinue(value)}

front/src/modules/spreadsheet-import/steps/components/Steps.tsx

@@ -8,7 +8,7 @@ import { useStepBar } from '@/ui/step-bar/hooks/useStepBar';
 
 import { UploadFlow } from './UploadFlow';
 
-const Header = styled(Modal.Header)`
+const StyledHeader = styled(Modal.Header)`
   background-color: ${({ theme }) => theme.background.secondary};
   border-bottom: 1px solid ${({ theme }) => theme.border.color.medium};
   height: 60px;
@@ -36,13 +36,13 @@ export const Steps = () => {
 
   return (
     <>
-      <Header>
+      <StyledHeader>
         <StepBar activeStep={activeStep}>
           {steps.map((key) => (
             <StepBar.Step label={stepTitles[key]} key={key} />
           ))}
         </StepBar>
-      </Header>
+      </StyledHeader>
       <UploadFlow nextStep={nextStep} />
     </>
   );

front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx

@@ -17,7 +17,7 @@ import { SelectSheetStep } from './SelectSheetStep/SelectSheetStep';
 import { UploadStep } from './UploadStep/UploadStep';
 import { ValidationStep } from './ValidationStep/ValidationStep';
 
-const ProgressBarContainer = styled(Modal.Content)`
+const StyledProgressBarContainer = styled(Modal.Content)`
   align-items: center;
   display: flex;
   justify-content: center;
@@ -209,13 +209,13 @@ export const UploadFlow = ({ nextStep }: Props) => {
     case StepType.loading:
     default:
       return (
-        <ProgressBarContainer>
+        <StyledProgressBarContainer>
           <CircularProgressBar
             size={80}
             barWidth={8}
             barColor={theme.font.color.primary}
           />
-        </ProgressBarContainer>
+        </StyledProgressBarContainer>
       );
   }
 };

front/src/modules/spreadsheet-import/steps/components/UploadStep/UploadStep.tsx

@@ -6,7 +6,7 @@ import { Modal } from '@/ui/modal/components/Modal';
 
 import { DropZone } from './components/DropZone';
 
-const Content = styled(Modal.Content)`
+const StyledContent = styled(Modal.Content)`
   padding: ${({ theme }) => theme.spacing(6)};
 `;
 
@@ -27,8 +27,8 @@ export const UploadStep = ({ onContinue }: UploadProps) => {
   );
 
   return (
-    <Content>
+    <StyledContent>
       <DropZone onContinue={handleOnContinue} isLoading={isLoading} />
-    </Content>
+    </StyledContent>
   );
 };

front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

@@ -8,7 +8,7 @@ import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
 import { MainButton } from '@/ui/button/components/MainButton';
 import { useSnackBar } from '@/ui/snack-bar/hooks/useSnackBar';
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => `
     repeating-linear-gradient(
@@ -55,7 +55,7 @@ const Container = styled.div`
   position: relative;
 `;
 
-const Overlay = styled.div`
+const StyledOverlay = styled.div`
   background: ${({ theme }) => theme.background.transparent.medium};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   bottom: 0px;
@@ -65,14 +65,14 @@ const Overlay = styled.div`
   top: 0px;
 `;
 
-const Text = styled.span`
+const StyledText = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.medium};
   text-align: center;
 `;
 
-const Button = styled(MainButton)`
+const StyledButton = styled(MainButton)`
   margin-top: ${({ theme }) => theme.spacing(2)};
   width: 200px;
 `;
@@ -125,19 +125,19 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
   });
 
   return (
-    <Container {...getRootProps()}>
+    <StyledContainer {...getRootProps()}>
-      {isDragActive && <Overlay />}
+      {isDragActive && <StyledOverlay />}
       <input {...getInputProps()} />
       {isDragActive ? (
-        <Text>Drop file here...</Text>
+        <StyledText>Drop file here...</StyledText>
       ) : loading || isLoading ? (
-        <Text>Processing...</Text>
+        <StyledText>Processing...</StyledText>
       ) : (
         <>
-          <Text>Upload .xlsx, .xls or .csv file</Text>
+          <StyledText>Upload .xlsx, .xls or .csv file</StyledText>
-          <Button onClick={open} title="Select file" />
+          <StyledButton onClick={open} title="Select file" />
         </>
       )}
-    </Container>
+    </StyledContainer>
   );
 };

front/src/modules/spreadsheet-import/steps/components/UploadStep/components/columns.tsx

@@ -5,21 +5,21 @@ import styled from '@emotion/styled';
 import type { Fields } from '@/spreadsheet-import/types';
 import { AppTooltip } from '@/ui/tooltip/AppTooltip';
 
-const HeaderContainer = styled.div`
+const StyledHeaderContainer = styled.div`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   position: relative;
 `;
 
-const HeaderLabel = styled.span`
+const StyledHeaderLabel = styled.span`
   display: flex;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
 
-const DefaultContainer = styled.div`
+const StyledDefaultContainer = styled.div`
   min-height: 100%;
   min-width: 100%;
   overflow: hidden;
@@ -33,8 +33,10 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
       name: column.label,
       minWidth: 150,
       headerRenderer: () => (
-        <HeaderContainer>
+        <StyledHeaderContainer>
-          <HeaderLabel id={`${column.key}`}>{column.label}</HeaderLabel>
+          <StyledHeaderLabel id={`${column.key}`}>
+            {column.label}
+          </StyledHeaderLabel>
           {column.description &&
             createPortal(
               <AppTooltip
@@ -44,10 +46,10 @@ export const generateColumns = <T extends string>(fields: Fields<T>) =>
               />,
               document.body,
             )}
-        </HeaderContainer>
+        </StyledHeaderContainer>
       ),
       formatter: ({ row }) => (
-        <DefaultContainer>{row[column.key]}</DefaultContainer>
+        <StyledDefaultContainer>{row[column.key]}</StyledDefaultContainer>
       ),
     }),
   );

front/src/modules/spreadsheet-import/steps/components/ValidationStep/ValidationStep.tsx

@@ -17,7 +17,7 @@ import { Modal } from '@/ui/modal/components/Modal';
 import { generateColumns } from './components/columns';
 import type { Meta } from './types';
 
-const Toolbar = styled.div`
+const StyledToolbar = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -25,20 +25,20 @@ const Toolbar = styled.div`
   margin-top: ${({ theme }) => theme.spacing(8)};
 `;
 
-const ErrorToggle = styled.div`
+const StyledErrorToggle = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
 `;
 
-const ErrorToggleDescription = styled.span`
+const StyledErrorToggleDescription = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
   margin-left: ${({ theme }) => theme.spacing(2)};
 `;
 
-const ScrollContainer = styled.div`
+const StyledScrollContainer = styled.div`
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -46,7 +46,7 @@ const ScrollContainer = styled.div`
   width: 100%;
 `;
 
-const NoRowsContainer = styled.div`
+const StyledNoRowsContainer = styled.div`
   display: flex;
   grid-column: 1/-1;
   justify-content: center;
@@ -188,16 +188,16 @@ export const ValidationStep = <T extends string>({
           title="Review your import"
           description="Correct the issues and fill the missing data."
         />
-        <Toolbar>
+        <StyledToolbar>
-          <ErrorToggle>
+          <StyledErrorToggle>
             <Toggle
               value={filterByErrors}
               onChange={() => setFilterByErrors(!filterByErrors)}
             />
-            <ErrorToggleDescription>
+            <StyledErrorToggleDescription>
               Show only rows with errors
-            </ErrorToggleDescription>
+            </StyledErrorToggleDescription>
-          </ErrorToggle>
+          </StyledErrorToggle>
           <Button
             icon={<IconTrash />}
             title="Remove"
@@ -205,8 +205,8 @@ export const ValidationStep = <T extends string>({
             onClick={deleteSelectedRows}
             disabled={selectedRows.size === 0}
           />
-        </Toolbar>
+        </StyledToolbar>
-        <ScrollContainer>
+        <StyledScrollContainer>
           <Table
             rowKeyGetter={rowKeyGetter}
             rows={tableData}
@@ -216,15 +216,15 @@ export const ValidationStep = <T extends string>({
             onSelectedRowsChange={setSelectedRows}
             components={{
               noRowsFallback: (
-                <NoRowsContainer>
+                <StyledNoRowsContainer>
                   {filterByErrors
                     ? 'No data containing errors'
                     : 'No data found'}
-                </NoRowsContainer>
+                </StyledNoRowsContainer>
               ),
             }}
           />
-        </ScrollContainer>
+        </StyledScrollContainer>
       </Modal.Content>
       <ContinueButton onContinue={onContinue} title="Confirm" />
     </>

front/src/modules/spreadsheet-import/steps/components/ValidationStep/components/columns.tsx

@@ -14,21 +14,21 @@ import { AppTooltip } from '@/ui/tooltip/AppTooltip';
 
 import type { Meta } from '../types';
 
-const HeaderContainer = styled.div`
+const StyledHeaderContainer = styled.div`
   align-items: center;
   display: flex;
   gap: ${({ theme }) => theme.spacing(1)};
   position: relative;
 `;
 
-const HeaderLabel = styled.span`
+const StyledHeaderLabel = styled.span`
   display: flex;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
 
-const CheckboxContainer = styled.div`
+const StyledCheckboxContainer = styled.div`
   align-items: center;
   box-sizing: content-box;
   display: flex;
@@ -39,13 +39,13 @@ const CheckboxContainer = styled.div`
   width: 100%;
 `;
 
-const ToggleContainer = styled.div`
+const StyledToggleContainer = styled.div`
   align-items: center;
   display: flex;
   height: 100%;
 `;
 
-const InputContainer = styled.div`
+const StyledInputContainer = styled.div`
   align-items: center;
   display: flex;
   min-height: 100%;
@@ -53,7 +53,7 @@ const InputContainer = styled.div`
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-const DefaultContainer = styled.div`
+const StyledDefaultContainer = styled.div`
   min-height: 100%;
   min-width: 100%;
   overflow: hidden;
@@ -79,7 +79,7 @@ export const generateColumns = <T extends string>(
       const [isRowSelected, onRowSelectionChange] = useRowSelection();
 
       return (
-        <CheckboxContainer>
+        <StyledCheckboxContainer>
           <Checkbox
             aria-label="Select"
             checked={isRowSelected}
@@ -92,7 +92,7 @@ export const generateColumns = <T extends string>(
               });
             }}
           />
-        </CheckboxContainer>
+        </StyledCheckboxContainer>
       );
     },
   },
@@ -103,8 +103,10 @@ export const generateColumns = <T extends string>(
       minWidth: 150,
       resizable: true,
       headerRenderer: () => (
-        <HeaderContainer>
+        <StyledHeaderContainer>
-          <HeaderLabel id={`${column.key}`}>{column.label}</HeaderLabel>
+          <StyledHeaderLabel id={`${column.key}`}>
+            {column.label}
+          </StyledHeaderLabel>
           {column.description &&
             createPortal(
               <AppTooltip
@@ -114,7 +116,7 @@ export const generateColumns = <T extends string>(
               />,
               document.body,
             )}
-        </HeaderContainer>
+        </StyledHeaderContainer>
       ),
       editable: column.fieldType.type !== 'checkbox',
       editor: ({ row, onRowChange, onClose }) => {
@@ -158,7 +160,7 @@ export const generateColumns = <T extends string>(
             );
         }
 
-        return <InputContainer>{component}</InputContainer>;
+        return <StyledInputContainer>{component}</StyledInputContainer>;
       },
       editorOptions: {
         editOnClick: true,
@@ -170,7 +172,7 @@ export const generateColumns = <T extends string>(
         switch (column.fieldType.type) {
           case 'checkbox':
             component = (
-              <ToggleContainer
+              <StyledToggleContainer
                 id={`${columnKey}-${row.__index}`}
                 onClick={(event) => {
                   event.stopPropagation();
@@ -185,23 +187,23 @@ export const generateColumns = <T extends string>(
                     });
                   }}
                 />
-              </ToggleContainer>
+              </StyledToggleContainer>
             );
             break;
           case 'select':
             component = (
-              <DefaultContainer id={`${columnKey}-${row.__index}`}>
+              <StyledDefaultContainer id={`${columnKey}-${row.__index}`}>
                 {column.fieldType.options.find(
                   (option) => option.value === row[columnKey as T],
                 )?.label || null}
-              </DefaultContainer>
+              </StyledDefaultContainer>
             );
             break;
           default:
             component = (
-              <DefaultContainer id={`${columnKey}-${row.__index}`}>
+              <StyledDefaultContainer id={`${columnKey}-${row.__index}`}>
                 {row[columnKey]}
-              </DefaultContainer>
+              </StyledDefaultContainer>
             );
         }
 

front/src/modules/ui/button/components/DropdownButton.tsx

@@ -65,11 +65,11 @@ const StyledDropdownItem = styled.button<ButtonProps>`
   }
 `;
 
-const DropdownContainer = styled.div`
+const StyledDropdownContainer = styled.div`
   position: relative;
 `;
 
-const DropdownMenu = styled.div`
+const StyledDropdownMenu = styled.div`
   display: flex;
   flex-direction: column;
   position: absolute;
@@ -112,7 +112,7 @@ export function DropdownButton({
   return (
     <>
       {selectedOption && (
-        <DropdownContainer>
+        <StyledDropdownContainer>
           <StyledButton
             onClick={() => setIsOpen(!isOpen)}
             {...buttonProps}
@@ -123,7 +123,7 @@ export function DropdownButton({
             {options.length > 1 && <IconChevronDown />}
           </StyledButton>
           {isOpen && (
-            <DropdownMenu>
+            <StyledDropdownMenu>
               {options
                 .filter((option) => option.label !== selectedOption.label)
                 .map((option, index) => (
@@ -135,9 +135,9 @@ export function DropdownButton({
                     {option.label}
                   </StyledDropdownItem>
                 ))}
-            </DropdownMenu>
+            </StyledDropdownMenu>
           )}
-        </DropdownContainer>
+        </StyledDropdownContainer>
       )}
     </>
   );

front/src/modules/ui/color-scheme/components/ColorSchemePicker.tsx

@@ -13,12 +13,12 @@ const StyledContainer = styled.div`
   }
 `;
 
-const CardContainer = styled.div`
+const StyledCardContainer = styled.div`
   display: flex;
   flex-direction: column;
 `;
 
-const Label = styled.span`
+const StyledLabel = styled.span`
   color: ${({ theme }) => theme.font.color.secondary};
   font-size: ${({ theme }) => theme.font.size.xs};
   font-weight: ${({ theme }) => theme.font.weight.medium};
@@ -33,30 +33,30 @@ export type ColorSchemePickerProps = {
 export function ColorSchemePicker({ value, onChange }: ColorSchemePickerProps) {
   return (
     <StyledContainer>
-      <CardContainer>
+      <StyledCardContainer>
         <ColorSchemeCard
           onClick={() => onChange(ColorScheme.Light)}
           variant="light"
           selected={value === ColorScheme.Light}
         />
-        <Label>Light</Label>
+        <StyledLabel>Light</StyledLabel>
-      </CardContainer>
+      </StyledCardContainer>
-      <CardContainer>
+      <StyledCardContainer>
         <ColorSchemeCard
           onClick={() => onChange(ColorScheme.Dark)}
           variant="dark"
           selected={value === ColorScheme.Dark}
         />
-        <Label>Dark</Label>
+        <StyledLabel>Dark</StyledLabel>
-      </CardContainer>
+      </StyledCardContainer>
-      <CardContainer>
+      <StyledCardContainer>
         <ColorSchemeCard
           onClick={() => onChange(ColorScheme.System)}
           variant="system"
           selected={value === ColorScheme.System}
         />
-        <Label>System settings</Label>
+        <StyledLabel>System settings</StyledLabel>
-      </CardContainer>
+      </StyledCardContainer>
     </StyledContainer>
   );
 }

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

@@ -5,7 +5,7 @@ import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
 import { ColorSchemeCard } from '../ColorSchemeCard';
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
   > * + * {
@@ -18,9 +18,9 @@ const meta: Meta<typeof ColorSchemeCard> = {
   component: ColorSchemeCard,
   decorators: [
     (Story) => (
-      <Container>
+      <StyledContainer>
         <Story />
-      </Container>
+      </StyledContainer>
     ),
     ComponentDecorator,
   ],

front/src/modules/ui/dialog/components/Dialog.tsx

@@ -4,7 +4,7 @@ import { motion } from 'framer-motion';
 
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 
-const DialogOverlay = styled(motion.div)`
+const StyledDialogOverlay = styled(motion.div)`
   align-items: center;
   background: ${({ theme }) => theme.background.overlay};
   display: flex;
@@ -17,7 +17,7 @@ const DialogOverlay = styled(motion.div)`
   z-index: 9999;
 `;
 
-const DialogContainer = styled(motion.div)`
+const StyledDialogContainer = styled(motion.div)`
   background: ${({ theme }) => theme.background.primary};
   border-radius: 8px;
   display: flex;
@@ -28,7 +28,7 @@ const DialogContainer = styled(motion.div)`
   width: 100%;
 `;
 
-const DialogTitle = styled.span`
+const StyledDialogTitle = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.semiBold};
@@ -36,7 +36,7 @@ const DialogTitle = styled.span`
   text-align: center;
 `;
 
-const DialogMessage = styled.span`
+const StyledDialogMessage = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
   font-size: ${({ theme }) => theme.font.size.sm};
   font-weight: ${({ theme }) => theme.font.weight.regular};
@@ -44,7 +44,7 @@ const DialogMessage = styled.span`
   text-align: center;
 `;
 
-const DialogButton = styled(Button)`
+const StyledDialogButton = styled(Button)`
   justify-content: center;
   margin-bottom: ${({ theme }) => theme.spacing(2)};
 `;
@@ -87,7 +87,7 @@ export function Dialog({
   };
 
   return (
-    <DialogOverlay
+    <StyledDialogOverlay
       variants={dialogVariants}
       initial="closed"
       animate="open"
@@ -99,16 +99,16 @@ export function Dialog({
         }
       }}
     >
-      <DialogContainer
+      <StyledDialogContainer
         variants={containerVariants}
         transition={{ damping: 15, stiffness: 100 }}
         {...rootProps}
       >
-        {title && <DialogTitle>{title}</DialogTitle>}
+        {title && <StyledDialogTitle>{title}</StyledDialogTitle>}
-        {message && <DialogMessage>{message}</DialogMessage>}
+        {message && <StyledDialogMessage>{message}</StyledDialogMessage>}
         {children}
         {buttons.map((button) => (
-          <DialogButton
+          <StyledDialogButton
             key={button.title}
             onClick={(e) => {
               button?.onClick?.(e);
@@ -119,7 +119,7 @@ export function Dialog({
             {...button}
           />
         ))}
-      </DialogContainer>
+      </StyledDialogContainer>
-    </DialogOverlay>
+    </StyledDialogOverlay>
   );
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 export const DropdownMenu = styled.div<{

front/src/modules/ui/dropdown/components/DropdownMenuCheckableItem.tsx

@@ -11,7 +11,7 @@ type Props = {
   id?: string;
 };
 
-const DropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
+const StyledDropdownMenuCheckableItemContainer = styled(DropdownMenuItem)`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -42,11 +42,11 @@ export function DropdownMenuCheckableItem({
   }
 
   return (
-    <DropdownMenuCheckableItemContainer onClick={handleClick}>
+    <StyledDropdownMenuCheckableItemContainer onClick={handleClick}>
       <StyledLeftContainer>
         <Checkbox checked={checked} />
         <StyledChildrenContainer>{children}</StyledChildrenContainer>
       </StyledLeftContainer>
-    </DropdownMenuCheckableItemContainer>
+    </StyledDropdownMenuCheckableItemContainer>
   );
 }

front/src/modules/ui/dropdown/components/DropdownMenuInput.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/theme/constants/effects';
 
-export const DropdownMenuInputContainer = styled.div`
+const StyledDropdownMenuInputContainer = styled.div`
   --vertical-padding: ${({ theme }) => theme.spacing(1)};
 
   align-items: center;
@@ -28,7 +28,7 @@ export const DropdownMenuInput = forwardRef<
   HTMLInputElement,
   InputHTMLAttributes<HTMLInputElement>
 >((props, ref) => (
-  <DropdownMenuInputContainer>
+  <StyledDropdownMenuInputContainer>
     <StyledInput autoComplete="off" placeholder="Search" {...props} ref={ref} />
-  </DropdownMenuInputContainer>
+  </StyledDropdownMenuInputContainer>
 ));

front/src/modules/ui/dropdown/components/DropdownMenuItemsContainer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 export const DropdownMenuItemsContainer = styled.div<{

front/src/modules/ui/dropdown/components/DropdownMenuSelectableItem.tsx

@@ -13,7 +13,7 @@ type Props = React.ComponentProps<'li'> & {
   disabled?: boolean;
 };
 
-const DropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
+const StyledDropdownMenuSelectableItemContainer = styled(DropdownMenuItem)<
   Pick<Props, 'hovered'>
 >`
   ${hoverBackground};
@@ -72,7 +72,7 @@ export function DropdownMenuSelectableItem({
   }, [hovered]);
 
   return (
-    <DropdownMenuSelectableItemContainer
+    <StyledDropdownMenuSelectableItemContainer
       {...restProps}
       onClick={handleClick}
       hovered={hovered}
@@ -82,6 +82,6 @@ export function DropdownMenuSelectableItem({
       <StyledRightIcon>
         {selected && <IconCheck size={theme.icon.size.md} />}
       </StyledRightIcon>
-    </DropdownMenuSelectableItemContainer>
+    </StyledDropdownMenuSelectableItemContainer>
   );
 }

front/src/modules/ui/dropdown/components/DropdownMenuSeparator.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 export const DropdownMenuSeparator = styled.div`

front/src/modules/ui/dropdown/components/DropdownMenuSubheader.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 export const DropdownMenuSubheader = styled.div`

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

@@ -43,19 +43,19 @@ const FakeContentBelow = () => (
 const avatarUrl =
   'https://s3-alpha-sig.figma.com/img/bbb5/4905/f0a52cc2b9aaeb0a82a360d478dae8bf?Expires=1687132800&Signature=iVBr0BADa3LHoFVGbwqO-wxC51n1o~ZyFD-w7nyTyFP4yB-Y6zFawL-igewaFf6PrlumCyMJThDLAAc-s-Cu35SBL8BjzLQ6HymzCXbrblUADMB208PnMAvc1EEUDq8TyryFjRO~GggLBk5yR0EXzZ3zenqnDEGEoQZR~TRqS~uDF-GwQB3eX~VdnuiU2iittWJkajIDmZtpN3yWtl4H630A3opQvBnVHZjXAL5YPkdh87-a-H~6FusWvvfJxfNC2ZzbrARzXofo8dUFtH7zUXGCC~eUk~hIuLbLuz024lFQOjiWq2VKyB7dQQuGFpM-OZQEV8tSfkViP8uzDLTaCg__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4';
 
-const FakeMenuContent = styled.div`
+const StyledFakeMenuContent = styled.div`
   height: 400px;
   width: 100%;
 `;
 
-const FakeBelowContainer = styled.div`
+const StyledFakeBelowContainer = styled.div`
   height: 600px;
   position: relative;
 
   width: 300px;
 `;
 
-const MenuAbsolutePositionWrapper = styled.div`
+const StyledMenuAbsolutePositionWrapper = styled.div`
   height: fit-content;
   position: absolute;
 
@@ -157,7 +157,7 @@ const FakeCheckableMenuItemList = ({ hasAvatar }: { hasAvatar?: boolean }) => {
 export const Empty: Story = {
   render: (args) => (
     <DropdownMenu {...args}>
-      <FakeMenuContent />
+      <StyledFakeMenuContent />
     </DropdownMenu>
   ),
 };
@@ -166,12 +166,12 @@ export const WithContentBelow: Story = {
   ...Empty,
   decorators: [
     (Story) => (
-      <FakeBelowContainer>
+      <StyledFakeBelowContainer>
         <FakeContentBelow />
-        <MenuAbsolutePositionWrapper>
+        <StyledMenuAbsolutePositionWrapper>
           <Story />
-        </MenuAbsolutePositionWrapper>
+        </StyledMenuAbsolutePositionWrapper>
-      </FakeBelowContainer>
+      </StyledFakeBelowContainer>
     ),
   ],
 };

front/src/modules/ui/editable-field/components/EditableField.tsx

@@ -50,7 +50,7 @@ const StyledEditButtonContainer = styled(motion.div)`
   right: 0;
 `;
 
-export const EditableFieldBaseContainer = styled.div`
+export const StyledEditableFieldBaseContainer = styled.div`
   align-items: center;
   box-sizing: border-box;
 
@@ -114,7 +114,7 @@ export function EditableField({
   const showEditButton = !isFieldInEditMode && isHovered && useEditButton;
 
   return (
-    <EditableFieldBaseContainer
+    <StyledEditableFieldBaseContainer
       onMouseEnter={handleContainerMouseEnter}
       onMouseLeave={handleContainerMouseLeave}
     >
@@ -151,6 +151,6 @@ export function EditableField({
           <EditableFieldEditButton />
         </StyledEditButtonContainer>
       )}
-    </EditableFieldBaseContainer>
+    </StyledEditableFieldBaseContainer>
   );
 }

front/src/modules/ui/editable-field/components/EditableFieldDisplayMode.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-export const EditableFieldNormalModeOuterContainer = styled.div<
+const StyledEditableFieldNormalModeOuterContainer = styled.div<
   Pick<
     OwnProps,
     | 'disableClick'
@@ -51,7 +51,7 @@ export const EditableFieldNormalModeOuterContainer = styled.div<
   }}
 `;
 
-export const EditableFieldNormalModeInnerContainer = styled.div`
+const StyledEditableFieldNormalModeInnerContainer = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
   font-size: 'inherit';
@@ -82,16 +82,16 @@ export function EditableFieldDisplayMode({
   isDisplayModeFixHeight,
 }: React.PropsWithChildren<OwnProps>) {
   return (
-    <EditableFieldNormalModeOuterContainer
+    <StyledEditableFieldNormalModeOuterContainer
       onClick={disableClick ? undefined : onClick}
       disableClick={disableClick}
       isDisplayModeContentEmpty={isDisplayModeContentEmpty}
       disableHoverEffect={disableHoverEffect}
       isDisplayModeFixHeight={isDisplayModeFixHeight}
     >
-      <EditableFieldNormalModeInnerContainer>
+      <StyledEditableFieldNormalModeInnerContainer>
         {children}
-      </EditableFieldNormalModeInnerContainer>
+      </StyledEditableFieldNormalModeInnerContainer>
-    </EditableFieldNormalModeOuterContainer>
+    </StyledEditableFieldNormalModeOuterContainer>
   );
 }

front/src/modules/ui/editable-field/components/EditableFieldEditMode.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { useRegisterCloseFieldHandlers } from '../hooks/useRegisterCloseFieldHandlers';
 
-export const EditableFieldEditModeContainer = styled.div<OwnProps>`
+const StyledEditableFieldEditModeContainer = styled.div<OwnProps>`
   align-items: center;
 
   display: flex;
@@ -33,11 +33,11 @@ export function EditableFieldEditMode({
   useRegisterCloseFieldHandlers(wrapperRef, onSubmit, onCancel);
 
   return (
-    <EditableFieldEditModeContainer
+    <StyledEditableFieldEditModeContainer
       data-testid="editable-field-edit-mode-container"
       ref={wrapperRef}
     >
       {children}
-    </EditableFieldEditModeContainer>
+    </StyledEditableFieldEditModeContainer>
   );
 }

front/src/modules/ui/editable-field/components/GenericEditableRelationFieldEditMode.tsx

@@ -19,7 +19,7 @@ import {
   FieldRelationValue,
 } from '../types/FieldMetadata';
 
-const RelationPickerContainer = styled.div`
+const StyledRelationPickerContainer = styled.div`
   left: 0px;
   position: absolute;
   top: -8px;
@@ -116,13 +116,13 @@ export function GenericEditableRelationFieldEditMode() {
   }
 
   return (
-    <RelationPickerContainer>
+    <StyledRelationPickerContainer>
       <RelationPicker
         fieldDefinition={currentEditableFieldDefinition}
         fieldValue={fieldValue}
         handleEntitySubmit={handleSubmit}
         handleCancel={handleCancel}
       />
-    </RelationPickerContainer>
+    </StyledRelationPickerContainer>
   );
 }

front/src/modules/ui/input/image/components/ImageInput.tsx

@@ -5,12 +5,12 @@ import styled from '@emotion/styled';
 import { Button, ButtonVariant } from '@/ui/button/components/Button';
 import { IconFileUpload, IconTrash, IconUpload } from '@/ui/icon';
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex-direction: row;
 `;
 
-const Picture = styled.button<{ withPicture: boolean }>`
+const StyledPicture = styled.button<{ withPicture: boolean }>`
   align-items: center;
   background: ${({ theme, disabled }) =>
     disabled ? theme.background.secondary : theme.background.tertiary};
@@ -46,7 +46,7 @@ const Picture = styled.button<{ withPicture: boolean }>`
   }};
 `;
 
-const Content = styled.div`
+const StyledContent = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -54,7 +54,7 @@ const Content = styled.div`
   margin-left: ${({ theme }) => theme.spacing(4)};
 `;
 
-const ButtonContainer = styled.div`
+const StyledButtonContainer = styled.div`
   display: flex;
   flex-direction: row;
   > * + * {
@@ -62,7 +62,7 @@ const ButtonContainer = styled.div`
   }
 `;
 
-const Text = styled.span`
+const StyledText = styled.span`
   color: ${({ theme }) => theme.font.color.light};
   font-size: ${({ theme }) => theme.font.size.xs};
 `;
@@ -92,8 +92,8 @@ export function ImageInput({
   };
 
   return (
-    <Container {...restProps}>
+    <StyledContainer {...restProps}>
-      <Picture
+      <StyledPicture
         withPicture={!!picture}
         disabled={disabled}
         onClick={onUploadButtonClick}
@@ -106,9 +106,9 @@ export function ImageInput({
         ) : (
           <IconFileUpload size={theme.icon.size.md} />
         )}
-      </Picture>
+      </StyledPicture>
-      <Content>
+      <StyledContent>
-        <ButtonContainer>
+        <StyledButtonContainer>
           <StyledHiddenFileInput
             type="file"
             ref={hiddenFileInput}
@@ -136,11 +136,11 @@ export function ImageInput({
             disabled={!picture || disabled}
             fullWidth
           />
-        </ButtonContainer>
+        </StyledButtonContainer>
-        <Text>
+        <StyledText>
           We support your best PNGs, JPEGs and GIFs portraits under 10MB
-        </Text>
+        </StyledText>
-      </Content>
+      </StyledContent>
-    </Container>
+    </StyledContainer>
   );
 }

front/src/modules/ui/input/radio/components/Radio.tsx

@@ -16,7 +16,7 @@ export enum LabelPosition {
   Right = 'right',
 }
 
-const Container = styled.div<{ labelPosition?: LabelPosition }>`
+const StyledContainer = styled.div<{ labelPosition?: LabelPosition }>`
   ${({ labelPosition }) =>
     labelPosition === LabelPosition.Left
       ? `
@@ -33,7 +33,7 @@ type RadioInputProps = {
   'radio-size'?: RadioSize;
 };
 
-const RadioInput = styled(motion.input)<RadioInputProps>`
+const StyledRadioInput = styled(motion.input)<RadioInputProps>`
   -webkit-appearance: none;
   appearance: none;
   background-color: transparent;
@@ -86,7 +86,7 @@ type LabelProps = {
   labelPosition?: LabelPosition;
 };
 
-const Label = styled.label<LabelProps>`
+const StyledLabel = styled.label<LabelProps>`
   color: ${({ theme }) => theme.font.color.primary};
   cursor: pointer;
   font-size: ${({ theme }) => theme.font.size.sm};
@@ -126,8 +126,8 @@ export function Radio({
   }
 
   return (
-    <Container {...restProps} labelPosition={labelPosition}>
+    <StyledContainer {...restProps} labelPosition={labelPosition}>
-      <RadioInput
+      <StyledRadioInput
         type="radio"
         id="input-radio"
         name="input-radio"
@@ -142,15 +142,15 @@ export function Radio({
         transition={{ type: 'spring', stiffness: 300, damping: 20 }}
       />
       {value && (
-        <Label
+        <StyledLabel
           htmlFor="input-radio"
           labelPosition={labelPosition}
           disabled={disabled}
         >
           {value}
-        </Label>
+        </StyledLabel>
       )}
-    </Container>
+    </StyledContainer>
   );
 }
 

front/src/modules/ui/input/text/components/TextInputContainer.tsx

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-import { overlayBackground } from '@/ui/theme/constants/effects';
-
-export const TextInputContainer = styled.div`
-  align-items: center;
-  border: 1px solid ${({ theme }) => theme.border.color.medium};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  display: flex;
-  margin-left: -1px;
-  min-height: 32px;
-  width: inherit;
-
-  ${overlayBackground}
-
-  z-index: 10;
-`;

front/src/modules/ui/input/text/components/TextInputDisplay.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 export const TextInputDisplay = styled.div`

front/src/modules/ui/input/text/components/TextInputEdit.tsx

@@ -1,15 +1,28 @@
 import styled from '@emotion/styled';
 
 import { textInputStyle } from '@/ui/theme/constants/effects';
+import { overlayBackground } from '@/ui/theme/constants/effects';
 
-import { TextInputContainer } from './TextInputContainer';
+const StyledInplaceInputTextInput = styled.input`
-
-const InplaceInputTextInput = styled.input`
   margin: 0;
   width: 100%;
   ${textInputStyle}
 `;
 
+const StyledTextInputContainer = styled.div`
+  align-items: center;
+  border: 1px solid ${({ theme }) => theme.border.color.medium};
+  border-radius: ${({ theme }) => theme.border.radius.sm};
+  display: flex;
+  margin-left: -1px;
+  min-height: 32px;
+  width: inherit;
+
+  ${overlayBackground}
+
+  z-index: 10;
+`;
+
 export type TextInputEditProps = {
   placeholder?: string;
   value?: string;
@@ -24,14 +37,14 @@ export function TextInputEdit({
   autoFocus,
 }: TextInputEditProps) {
   return (
-    <TextInputContainer>
+    <StyledTextInputContainer>
-      <InplaceInputTextInput
+      <StyledInplaceInputTextInput
         autoComplete="off"
         autoFocus={autoFocus}
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange?.(e.target.value)}
       />
-    </TextInputContainer>
+    </StyledTextInputContainer>
   );
 }

front/src/modules/ui/input/toggle/components/Toggle.tsx

@@ -7,7 +7,7 @@ type ContainerProps = {
   color?: string;
 };
 
-const Container = styled.div<ContainerProps>`
+const StyledContainer = styled.div<ContainerProps>`
   align-items: center;
   background-color: ${({ theme, isOn, color }) =>
     isOn ? color ?? theme.color.blue : theme.background.quaternary};
@@ -19,7 +19,7 @@ const Container = styled.div<ContainerProps>`
   width: 32px;
 `;
 
-const Circle = styled(motion.div)`
+const StyledCircle = styled(motion.div)`
   background-color: #fff;
   border-radius: 50%;
   height: 16px;
@@ -56,8 +56,8 @@ export function Toggle({ value, onChange, color }: ToggleProps) {
   }, [value]);
 
   return (
-    <Container onClick={handleChange} isOn={isOn} color={color}>
+    <StyledContainer onClick={handleChange} isOn={isOn} color={color}>
-      <Circle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
+      <StyledCircle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
-    </Container>
+    </StyledContainer>
   );
 }

front/src/modules/ui/layout/components/DefaultLayout.tsx

@@ -37,7 +37,7 @@ const StyledLayout = styled.div`
 
 const NAVBAR_WIDTH = '236px';
 
-const MainContainer = styled.div`
+const StyledMainContainer = styled.div`
   display: flex;
   flex-direction: row;
   overflow: hidden;
@@ -63,7 +63,7 @@ export function DefaultLayout({ children }: OwnProps) {
       <NavbarAnimatedContainer>
         <AppNavbar />
       </NavbarAnimatedContainer>
-      <MainContainer>
+      <StyledMainContainer>
         {onboardingStatus && onboardingStatus !== OnboardingStatus.Completed ? (
           <>
             <CompaniesMockMode />
@@ -76,7 +76,7 @@ export function DefaultLayout({ children }: OwnProps) {
         ) : (
           <>{children}</>
         )}
-      </MainContainer>
+      </StyledMainContainer>
     </StyledLayout>
   );
 }

front/src/modules/ui/layout/components/ShowPageContainer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

front/src/modules/ui/layout/page-bar/components/PageBar.tsx

@@ -14,7 +14,7 @@ import { isNavbarOpenedState } from '../../states/isNavbarOpenedState';
 
 export const PAGE_BAR_MIN_HEIGHT = 40;
 
-const TopBarContainer = styled.div`
+const StyledTopBarContainer = styled.div`
   align-items: center;
   background: ${({ theme }) => theme.background.noisy};
   color: ${({ theme }) => theme.font.color.primary};
@@ -35,18 +35,18 @@ const StyledLeftContainer = styled.div`
   width: 100%;
 `;
 
-const TitleContainer = styled.div`
+const StyledTitleContainer = styled.div`
   display: flex;
   font-size: ${({ theme }) => theme.font.size.md};
   margin-left: ${({ theme }) => theme.spacing(1)};
   max-width: 50%;
 `;
 
-const TopBarButtonContainer = styled.div`
+const StyledTopBarButtonContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
-const BackIconButton = styled(IconButton)`
+const StyledBackIconButton = styled(IconButton)`
   margin-right: ${({ theme }) => theme.spacing(1)};
 `;
 
@@ -58,7 +58,7 @@ const StyledTopBarIconTitleContainer = styled.div`
   width: 100%;
 `;
 
-const ActionButtonsContainer = styled.div`
+const StyledActionButtonsContainer = styled.div`
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(2)};
 `;
@@ -91,29 +91,29 @@ export function PageBar({
 
   return (
     <>
-      <TopBarContainer>
+      <StyledTopBarContainer>
         <StyledLeftContainer>
           {!isNavbarOpened && (
-            <TopBarButtonContainer>
+            <StyledTopBarButtonContainer>
               <NavCollapseButton direction="right" />
-            </TopBarButtonContainer>
+            </StyledTopBarButtonContainer>
           )}
           {hasBackButton && (
-            <TopBarButtonContainer>
+            <StyledTopBarButtonContainer>
-              <BackIconButton
+              <StyledBackIconButton
                 icon={<IconChevronLeft size={iconSize} />}
                 onClick={navigateBack}
               />
-            </TopBarButtonContainer>
+            </StyledTopBarButtonContainer>
           )}
           <StyledTopBarIconTitleContainer>
             {icon}
-            <TitleContainer data-testid="top-bar-title">
+            <StyledTitleContainer data-testid="top-bar-title">
               <OverflowingTextWithTooltip text={title} />
-            </TitleContainer>
+            </StyledTitleContainer>
           </StyledTopBarIconTitleContainer>
         </StyledLeftContainer>
-        <ActionButtonsContainer>
+        <StyledActionButtonsContainer>
           {onFavoriteButtonClick && (
             <IconButton
               icon={<IconHeart size={16} />}
@@ -134,8 +134,8 @@ export function PageBar({
               variant="border"
             />
           )}
-        </ActionButtonsContainer>
+        </StyledActionButtonsContainer>
-      </TopBarContainer>
+      </StyledTopBarContainer>
     </>
   );
 }

front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import styled from '@emotion/styled';
 
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';

front/src/modules/ui/modal/components/Modal.tsx

@@ -7,7 +7,7 @@ import {
   useListenClickOutside,
 } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
 
-const ModalDiv = styled(motion.div)`
+const StyledModalDiv = styled(motion.div)`
   display: flex;
   flex-direction: column;
   background: ${({ theme }) => theme.background.primary};
@@ -43,7 +43,7 @@ const StyledFooter = styled.div`
   padding: ${({ theme }) => theme.spacing(5)};
 `;
 
-const BackDrop = styled(motion.div)`
+const StyledBackDrop = styled(motion.div)`
   align-items: center;
   background: ${({ theme }) => theme.background.overlay};
   display: flex;
@@ -111,8 +111,8 @@ export function Modal({
   }
 
   return (
-    <BackDrop>
+    <StyledBackDrop>
-      <ModalDiv
+      <StyledModalDiv
         // framer-motion seems to have typing problems with refs
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
@@ -125,8 +125,8 @@ export function Modal({
         {...restProps}
       >
         {children}
-      </ModalDiv>
+      </StyledModalDiv>
-    </BackDrop>
+    </StyledBackDrop>
   );
 }
 

front/src/modules/ui/navbar/components/NavBackButton.tsx

@@ -9,7 +9,7 @@ type OwnProps = {
   title: string;
 };
 
-const IconAndButtonContainer = styled.button`
+const StyledIconAndButtonContainer = styled.button`
   align-items: center;
   background: inherit;
   border: none;
@@ -39,7 +39,7 @@ export default function NavBackButton({ title }: OwnProps) {
   return (
     <>
       <StyledContainer>
-        <IconAndButtonContainer
+        <StyledIconAndButtonContainer
           onClick={() => {
             setIsNavbarSwitchingSize(true);
             navigate('/', { replace: true });
@@ -47,7 +47,7 @@ export default function NavBackButton({ title }: OwnProps) {
         >
           <IconChevronLeft />
           <span>{title}</span>
-        </IconAndButtonContainer>
+        </StyledIconAndButtonContainer>
       </StyledContainer>
     </>
   );

front/src/modules/ui/navbar/components/NavCollapseButton.tsx

@@ -10,7 +10,7 @@ import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { navbarIconSize } from '../constants';
 
-const CollapseButton = styled.button`
+const StyledCollapseButton = styled.button`
   align-items: center;
   background: inherit;
   border: 0;
@@ -48,13 +48,13 @@ export default function NavCollapseButton({
   return (
     <>
       {direction === 'left' ? (
-        <CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+        <StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
           <IconLayoutSidebarLeftCollapse size={iconSize} />
-        </CollapseButton>
+        </StyledCollapseButton>
       ) : (
-        <CollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
+        <StyledCollapseButton onClick={() => setIsNavOpen(!isNavOpen)}>
           <IconLayoutSidebarRightCollapse size={iconSize} />
-        </CollapseButton>
+        </StyledCollapseButton>
       )}
     </>
   );

front/src/modules/ui/navbar/components/NavWorkspaceButton.tsx

@@ -21,7 +21,7 @@ const StyledContainer = styled.div`
   user-select: none;
 `;
 
-const LogoAndNameContainer = styled.div`
+const StyledLogoAndNameContainer = styled.div`
   align-items: center;
   display: flex;
 `;
@@ -56,7 +56,7 @@ function NavWorkspaceButton() {
 
   return (
     <StyledContainer>
-      <LogoAndNameContainer>
+      <StyledLogoAndNameContainer>
         <StyledLogo
           logo={
             currentWorkspace?.logo
@@ -65,7 +65,7 @@ function NavWorkspaceButton() {
           }
         ></StyledLogo>
         <StyledName>{currentWorkspace?.displayName ?? 'Twenty'}</StyledName>
-      </LogoAndNameContainer>
+      </StyledLogoAndNameContainer>
       <NavCollapseButton direction="left" />
     </StyledContainer>
   );

front/src/modules/ui/right-drawer/components/RightDrawerRouter.tsx

@@ -10,14 +10,14 @@ import { RightDrawerPages } from '../types/RightDrawerPages';
 
 import { RightDrawerTopBar } from './RightDrawerTopBar';
 
-const RightDrawerPage = styled.div`
+const StyledRightDrawerPage = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
   width: 100%;
 `;
 
-const RightDrawerBody = styled.div`
+const StyledRightDrawerBody = styled.div`
   display: flex;
   flex-direction: column;
   height: calc(
@@ -47,9 +47,9 @@ export function RightDrawerRouter() {
   }
 
   return (
-    <RightDrawerPage>
+    <StyledRightDrawerPage>
       <RightDrawerTopBar />
-      <RightDrawerBody>{page}</RightDrawerBody>
+      <StyledRightDrawerBody>{page}</StyledRightDrawerBody>
-    </RightDrawerPage>
+    </StyledRightDrawerPage>
   );
 }

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

@@ -24,7 +24,7 @@ const StyledRightDrawerTopBar = styled.div`
   padding-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-const TopBarWrapper = styled.div`
+const StyledTopBarWrapper = styled.div`
   display: flex;
 `;
 
@@ -34,10 +34,10 @@ export function RightDrawerTopBar() {
 
   return (
     <StyledRightDrawerTopBar>
-      <TopBarWrapper>
+      <StyledTopBarWrapper>
         <RightDrawerTopBarCloseButton />
         {!isMobile && <RightDrawerTopBarExpandButton />}
-      </TopBarWrapper>
+      </StyledTopBarWrapper>
       <ActivityActionBar activityId={activityId ?? ''} />
     </StyledRightDrawerTopBar>
   );

front/src/modules/ui/snack-bar/components/SnackBar.tsx

@@ -51,7 +51,7 @@ const StyledIconContainer = styled.div`
   margin-right: ${({ theme }) => theme.spacing(2)};
 `;
 
-const ProgressBarContainer = styled.div`
+const StyledProgressBarContainer = styled.div`
   height: 5px;
   left: 0;
   position: absolute;
@@ -59,7 +59,7 @@ const ProgressBarContainer = styled.div`
   top: 0;
 `;
 
-const CloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
+const StyledCloseButton = styled.button<Pick<SnackbarProps, 'variant'>>`
   align-items: center;
   background-color: transparent;
   border: none;
@@ -162,20 +162,20 @@ export function SnackBar({
       variant={variant}
       {...rootProps}
     >
-      <ProgressBarContainer>
+      <StyledProgressBarContainer>
         <ProgressBar
           ref={progressBarRef}
           barHeight={5}
           barColor={rgba(theme.grayScale.gray0, 0.3)}
           duration={duration}
         />
-      </ProgressBarContainer>
+      </StyledProgressBarContainer>
       {icon && <StyledIconContainer>{icon}</StyledIconContainer>}
       {children ? children : message}
       {allowDismiss && (
-        <CloseButton variant={variant} onClick={closeSnackbar}>
+        <StyledCloseButton variant={variant} onClick={closeSnackbar}>
           <IconX aria-label="Close" size={theme.icon.size.md} />
-        </CloseButton>
+        </StyledCloseButton>
       )}
     </StyledMotionContainer>
   );

front/src/modules/ui/snack-bar/components/SnackBarProvider.tsx

@@ -6,7 +6,7 @@ import { snackBarInternalState } from '../states/snackBarState';
 
 import { SnackBar } from './SnackBar';
 
-const SnackBarContainer = styled.div`
+const StyledSnackBarContainer = styled.div`
   display: flex;
   flex-direction: column;
   position: fixed;
@@ -15,7 +15,7 @@ const SnackBarContainer = styled.div`
   z-index: 99999999;
 `;
 
-const SnackBarMotionContainer = styled(motion.div)`
+const StyledSnackBarMotionContainer = styled(motion.div)`
   margin-right: ${({ theme }) => theme.spacing(3)};
   margin-top: ${({ theme }) => theme.spacing(3)};
 `;
@@ -68,9 +68,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
   return (
     <>
       {children}
-      <SnackBarContainer>
+      <StyledSnackBarContainer>
         {snackBarState.queue.map((snackBar) => (
-          <SnackBarMotionContainer
+          <StyledSnackBarMotionContainer
             key={snackBar.id}
             variants={reducedMotion ? reducedVariants : variants}
             initial="initial"
@@ -83,9 +83,9 @@ export function SnackBarProvider({ children }: React.PropsWithChildren) {
               {...snackBar}
               onClose={() => handleSnackBarClose(snackBar.id)}
             />
-          </SnackBarMotionContainer>
+          </StyledSnackBarMotionContainer>
         ))}
-      </SnackBarContainer>
+      </StyledSnackBarContainer>
     </>
   );
 }

front/src/modules/ui/step-bar/components/Step.tsx

@@ -4,13 +4,13 @@ import { motion } from 'framer-motion';
 
 import { AnimatedCheckmark } from '@/ui/checkmark/components/AnimatedCheckmark';
 
-const Container = styled.div<{ isLast: boolean }>`
+const StyledContainer = styled.div<{ isLast: boolean }>`
   align-items: center;
   display: flex;
   flex-grow: ${({ isLast }) => (isLast ? '0' : '1')};
 `;
 
-const StepCircle = styled(motion.div)`
+const StyledStepCircle = styled(motion.div)`
   align-items: center;
   border-radius: 50%;
   border-style: solid;
@@ -25,13 +25,13 @@ const StepCircle = styled(motion.div)`
   width: 20px;
 `;
 
-const StepIndex = styled.span`
+const StyledStepIndex = styled.span`
   color: ${({ theme }) => theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.md};
   font-weight: ${({ theme }) => theme.font.weight.medium};
 `;
 
-const StepLabel = styled.span<{ isActive: boolean }>`
+const StyledStepLabel = styled.span<{ isActive: boolean }>`
   color: ${({ theme, isActive }) =>
     isActive ? theme.font.color.primary : theme.font.color.tertiary};
   font-size: ${({ theme }) => theme.font.size.md};
@@ -40,7 +40,7 @@ const StepLabel = styled.span<{ isActive: boolean }>`
   white-space: nowrap;
 `;
 
-const StepLine = styled(motion.div)`
+const StyledStepLine = styled(motion.div)`
   height: 2px;
   margin-left: ${({ theme }) => theme.spacing(2)};
   margin-right: ${({ theme }) => theme.spacing(2)};
@@ -90,8 +90,8 @@ export const Step = ({
   };
 
   return (
-    <Container isLast={isLast}>
+    <StyledContainer isLast={isLast}>
-      <StepCircle
+      <StyledStepCircle
         variants={variantsCircle}
         animate={isActive ? 'active' : 'inactive'}
       >
@@ -101,17 +101,17 @@ export const Step = ({
             color={theme.grayScale.gray0}
           />
         )}
-        {!isActive && <StepIndex>{index + 1}</StepIndex>}
+        {!isActive && <StyledStepIndex>{index + 1}</StyledStepIndex>}
-      </StepCircle>
+      </StyledStepCircle>
-      <StepLabel isActive={isActive}>{label}</StepLabel>
+      <StyledStepLabel isActive={isActive}>{label}</StyledStepLabel>
       {!isLast && (
-        <StepLine
+        <StyledStepLine
           variants={variantsLine}
           animate={isActive ? 'active' : 'inactive'}
         />
       )}
       {isActive && children}
-    </Container>
+    </StyledContainer>
   );
 };
 

front/src/modules/ui/step-bar/components/StepBar.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 
 import { Step, StepProps } from './Step';
 
-const Container = styled.div`
+const StyledContainer = styled.div`
   display: flex;
   flex: 1;
   justify-content: space-between;
@@ -16,7 +16,7 @@ export type StepsProps = React.PropsWithChildren &
 
 export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
   return (
-    <Container {...restProps}>
+    <StyledContainer {...restProps}>
       {React.Children.map(children, (child, index) => {
         if (!React.isValidElement(child)) {
           return null;
@@ -35,7 +35,7 @@ export const StepBar = ({ children, activeStep, ...restProps }: StepsProps) => {
           isLast: index === React.Children.count(children) - 1,
         });
       })}
-    </Container>
+    </StyledContainer>
   );
 };
 

front/src/modules/ui/table/editable-cell/components/EditableCellContainer.tsx

@@ -27,7 +27,7 @@ const StyledEditableCellDisplayModeOuterContainer = styled.div<
       : ''}
 `;
 
-const EditableCellDisplayModeInnerContainer = styled.div`
+const StyledEditableCellDisplayModeInnerContainer = styled.div`
   align-items: center;
   display: flex;
   height: 100%;
@@ -52,9 +52,9 @@ export function EditableCellDisplayContainer({
       softFocus={softFocus}
       ref={scrollRef}
     >
-      <EditableCellDisplayModeInnerContainer>
+      <StyledEditableCellDisplayModeInnerContainer>
         {children}
-      </EditableCellDisplayModeInnerContainer>
+      </StyledEditableCellDisplayModeInnerContainer>
     </StyledEditableCellDisplayModeOuterContainer>
   );
 }

front/src/modules/ui/tooltip/AppTooltip.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable twenty/styled-components-prefixed-with-styled */
 import { Tooltip } from 'react-tooltip';
 import styled from '@emotion/styled';
 

front/src/modules/ui/utilities/animation/components/AnimatedTextWord.tsx

@@ -7,7 +7,7 @@ const StyledContainer = styled(motion.div)`
   overflow: hidden;
 `;
 
-const Word = styled(motion.span)`
+const StyledWord = styled(motion.span)`
   white-space: pre;
 `;
 
@@ -61,9 +61,9 @@ export function AnimatedTextWord({ text = '', ...restProps }: Props) {
       {...restProps}
     >
       {words.map((word, index) => (
-        <Word variants={childAnimation} key={index}>
+        <StyledWord variants={childAnimation} key={index}>
           {word}
-        </Word>
+        </StyledWord>
       ))}
     </StyledContainer>
   );

front/src/modules/workspace/components/WorkspaceMemberCard.tsx

@@ -14,7 +14,7 @@ const StyledContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(3)};
 `;
 
-const Content = styled.div`
+const StyledContent = styled.div`
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -22,11 +22,11 @@ const Content = styled.div`
   margin-left: ${({ theme }) => theme.spacing(3)};
 `;
 
-const NameText = styled.span`
+const StyledNameText = styled.span`
   color: ${({ theme }) => theme.font.color.primary};
 `;
 
-const EmailText = styled.span`
+const StyledEmailText = styled.span`
   color: ${({ theme }) => theme.font.color.tertiary};
 `;
 
@@ -50,10 +50,10 @@ export function WorkspaceMemberCard({ workspaceMember, accessory }: OwnProps) {
         type="squared"
         size="xl"
       />
-      <Content>
+      <StyledContent>
-        <NameText>{workspaceMember.user.displayName}</NameText>
+        <StyledNameText>{workspaceMember.user.displayName}</StyledNameText>
-        <EmailText>{workspaceMember.user.email}</EmailText>
+        <StyledEmailText>{workspaceMember.user.email}</StyledEmailText>
-      </Content>
+      </StyledContent>
 
       {accessory}
     </StyledContainer>

front/src/pages/settings/SettingsWorkspaceMembers.tsx

@@ -30,7 +30,7 @@ const StyledContainer = styled.div`
   width: 350px;
 `;
 
-const ButtonContainer = styled.div`
+const StyledButtonContainer = styled.div`
   align-items: center;
   display: flex;
   flex-direction: row;
@@ -109,7 +109,7 @@ export function SettingsWorkspaceMembers() {
               workspaceMember={{ user: member.user }}
               accessory={
                 currentUser?.id !== member.user.id && (
-                  <ButtonContainer>
+                  <StyledButtonContainer>
                     <Button
                       onClick={() => {
                         setIsConfirmationModalOpen(true);
@@ -119,7 +119,7 @@ export function SettingsWorkspaceMembers() {
                       size={ButtonSize.Small}
                       icon={<IconTrash size={theme.icon.size.md} />}
                     />
-                  </ButtonContainer>
+                  </StyledButtonContainer>
                 )
               }
             />

front/yarn.lock

@@ -9722,7 +9722,7 @@ eslint-plugin-testing-library@^5.0.1:
     "@typescript-eslint/utils" "^5.58.0"
 
 "eslint-plugin-twenty@file:../packages/eslint-plugin-twenty":
-  version "0.0.1"
+  version "0.0.2"
   dependencies:
     postcss "^8.4.24"
 

packages/eslint-plugin-twenty/index.js

@@ -1,10 +1,12 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const noHardcodedColors = require('./rules/no-hardcoded-colors');
 const cssAlphabetically = require('./rules/sort-css-properties-alphabetically');
+const styledComponentsPrefixedWithStyled = require('./rules/styled-components-prefixed-with-styled');
 
 module.exports = {
   rules: {
     'no-hardcoded-colors': noHardcodedColors,
     'sort-css-properties-alphabetically': cssAlphabetically,
+    'styled-components-prefixed-with-styled': styledComponentsPrefixedWithStyled,
   },
 };

packages/eslint-plugin-twenty/package.json

@@ -1,6 +1,6 @@
 {
     "name": "eslint-plugin-twenty",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "main": "index.js",
     "dependencies": {
         "postcss": "^8.4.24"

packages/eslint-plugin-twenty/rules/styled-components-prefixed-with-styled.js

@@ -0,0 +1,32 @@
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description: 'Warn when StyledComponents are not prefixed with Styled',
+      },
+      recommended: true,
+      fixable: 'code',
+    schema: [],
+  },
+  create: function(context) {
+    return {
+      VariableDeclarator: node => {
+        const templateExpr = node.init
+        if (templateExpr?.type !== 'TaggedTemplateExpression') {
+          return;
+        }
+        const tag = templateExpr.tag
+        const tagged = tag.type === 'MemberExpression' ? tag.object 
+                          : tag.type === 'CallExpression' ? tag.callee 
+                          : null
+        if (tagged?.name === 'styled') {
+          const variable = node.id;
+          if (variable?.name.startsWith('Styled')) {
+            return;
+          }
+          context.report({ node, message: `'${variable.name}' is a StyledComponent and is not prefixed with Styled.` });
+        }
+      },
+    }
+  }
+};