Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

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>
     ),
   ],
 };