Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

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()}>
-      {isDragActive && <Overlay />}
+    <StyledContainer {...getRootProps()}>
+      {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>
-          <Button onClick={open} title="Select file" />
+          <StyledText>Upload .xlsx, .xls or .csv file</StyledText>
+          <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>
-          <HeaderLabel id={`${column.key}`}>{column.label}</HeaderLabel>
+        <StyledHeaderContainer>
+          <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>
       ),
     }),
   );