Add styled component rule (#1261)

* Add StyledComponent rule

* update doc

* update doc

* update doc

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 InplaceInputTextInput = styled.input`
+const StyledInplaceInputTextInput = 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>
-      <InplaceInputTextInput
+    <StyledTextInputContainer>
+      <StyledInplaceInputTextInput
         autoComplete="off"
         autoFocus={autoFocus}
         placeholder={placeholder}
         value={value}
         onChange={(e) => onChange?.(e.target.value)}
       />
-    </TextInputContainer>
+    </StyledTextInputContainer>
   );
 }