Add styled component rule (#1261)

* Add StyledComponent rule * update doc * update doc * update doc
2023-08-17 20:58:02 -07:00
parent 390e70a196
commit 9b34a0ff3d
70 changed files with 433 additions and 354 deletions
--- a/front/src/modules/ui/input/image/components/ImageInput.tsx
+++ b/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}>
-      <Picture
+    <StyledContainer {...restProps}>
+      <StyledPicture
        withPicture={!!picture}
        disabled={disabled}
        onClick={onUploadButtonClick}
@ -106,9 +106,9 @@ export function ImageInput({
        ) : (
          <IconFileUpload size={theme.icon.size.md} />
        )}
-      </Picture>
-      <Content>
-        <ButtonContainer>
+      </StyledPicture>
+      <StyledContent>
+        <StyledButtonContainer>
          <StyledHiddenFileInput
            type="file"
            ref={hiddenFileInput}
@ -136,11 +136,11 @@ export function ImageInput({
            disabled={!picture || disabled}
            fullWidth
          />
-        </ButtonContainer>
-        <Text>
+        </StyledButtonContainer>
+        <StyledText>
          We support your best PNGs, JPEGs and GIFs portraits under 10MB
-        </Text>
-      </Content>
-    </Container>
+        </StyledText>
+      </StyledContent>
+    </StyledContainer>
  );
 }
--- a/front/src/modules/ui/input/radio/components/Radio.tsx
+++ b/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}>
-      <RadioInput
+    <StyledContainer {...restProps} labelPosition={labelPosition}>
+      <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>
  );
 }

--- a/front/src/modules/ui/input/text/components/TextInputContainer.tsx
+++ b/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;
-`;
--- a/front/src/modules/ui/input/text/components/TextInputDisplay.tsx
+++ b/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`
--- a/front/src/modules/ui/input/text/components/TextInputEdit.tsx
+++ b/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>
  );
 }
--- a/front/src/modules/ui/input/toggle/components/Toggle.tsx
+++ b/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}>
-      <Circle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
-    </Container>
+    <StyledContainer onClick={handleChange} isOn={isOn} color={color}>
+      <StyledCircle animate={isOn ? 'on' : 'off'} variants={circleVariants} />
+    </StyledContainer>
  );
 }