Merge pull request #111 from yourssu/develop

v1.1.2
yourssu · May 23, 2024 · 61ab34c · 61ab34c
2 parents 6928b9a + 03f8f08
commit 61ab34c
Show file tree

Hide file tree

Showing 7 changed files with 151 additions and 122 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@yourssu/design-system-react",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Yourssu Design System for React",
   "keywords": [
     "yourssu",

diff --git a/src/components/TextField/PasswordTextField/PasswordTextField.tsx b/src/components/TextField/PasswordTextField/PasswordTextField.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 
 import { useTheme } from 'styled-components';
 
@@ -8,32 +8,36 @@ import { TextField } from '../TextField';
 
 import { PasswordTextFieldProps } from './PasswordTextField.type';
 
-export const PasswordTextField = ({ isMarked = true, ...props }: PasswordTextFieldProps) => {
-  const theme = useTheme();
-  const [isMarkedValue, setIsMarkedValue] = useState(isMarked);
+export const PasswordTextField = forwardRef<HTMLInputElement, PasswordTextFieldProps>(
+  ({ isMarked = true, ...props }, ref) => {
+    const theme = useTheme();
+    const [isMarkedValue, setIsMarkedValue] = useState(isMarked);
 
-  const onClickEyeButton = () => {
-    setIsMarkedValue((prev) => !prev);
-  };
+    const onClickEyeButton = () => {
+      setIsMarkedValue((prev) => !prev);
+    };
 
-  return (
-    <TextField
-      type={isMarkedValue ? 'password' : 'text'}
-      suffix={
-        <IconContext.Provider
-          value={{
-            color: theme.color.buttonNormal,
-            size: '1.5rem',
-          }}
-        >
-          {isMarkedValue ? (
-            <IcEyeclosedLine onClick={onClickEyeButton} />
-          ) : (
-            <IcEyeopenLine onClick={onClickEyeButton} />
-          )}
-        </IconContext.Provider>
-      }
-      {...props}
-    ></TextField>
-  );
-};
+    return (
+      <TextField
+        ref={ref}
+        type={isMarkedValue ? 'password' : 'text'}
+        suffix={
+          <IconContext.Provider
+            value={{
+              color: theme.color.buttonNormal,
+              size: '1.5rem',
+            }}
+          >
+            {isMarkedValue ? (
+              <IcEyeclosedLine onClick={onClickEyeButton} />
+            ) : (
+              <IcEyeopenLine onClick={onClickEyeButton} />
+            )}
+          </IconContext.Provider>
+        }
+        {...props}
+      ></TextField>
+    );
+  }
+);
+PasswordTextField.displayName = 'PasswordTextField';
diff --git a/src/components/TextField/SearchTextField/SearchTextField.tsx b/src/components/TextField/SearchTextField/SearchTextField.tsx
@@ -1,3 +1,5 @@
+import { forwardRef } from 'react';
+
 import { useTheme } from 'styled-components';
 
 import { IcSearchLine, IcXLine, IconContext } from '@/style';
@@ -6,32 +8,36 @@ import { TextField } from '../TextField';
 
 import { SearchTextFieldProps } from './SearchTextField.type';
 
-export const SearchTextField = ({ onClickClearButton, ...props }: SearchTextFieldProps) => {
-  const theme = useTheme();
+export const SearchTextField = forwardRef<HTMLInputElement, SearchTextFieldProps>(
+  ({ onClickClearButton, ...props }, ref) => {
+    const theme = useTheme();
 
-  return (
-    <TextField
-      suffix={
-        <IconContext.Provider
-          value={{
-            color: theme.color.buttonNormal,
-            size: '1rem',
-          }}
-        >
-          <IcXLine onClick={onClickClearButton} />
-        </IconContext.Provider>
-      }
-      searchPrefix={
-        <IconContext.Provider
-          value={{
-            color: theme.color.textTertiary,
-            size: '1.25rem',
-          }}
-        >
-          <IcSearchLine />
-        </IconContext.Provider>
-      }
-      {...props}
-    />
-  );
-};
+    return (
+      <TextField
+        ref={ref}
+        suffix={
+          <IconContext.Provider
+            value={{
+              color: theme.color.buttonNormal,
+              size: '1rem',
+            }}
+          >
+            <IcXLine onClick={onClickClearButton} />
+          </IconContext.Provider>
+        }
+        searchPrefix={
+          <IconContext.Provider
+            value={{
+              color: theme.color.textTertiary,
+              size: '1.25rem',
+            }}
+          >
+            <IcSearchLine />
+          </IconContext.Provider>
+        }
+        {...props}
+      />
+    );
+  }
+);
+SearchTextField.displayName = 'SearchTextField';
diff --git a/src/components/TextField/SimpleTextField/SimpleTextField.tsx b/src/components/TextField/SimpleTextField/SimpleTextField.tsx
@@ -1,3 +1,5 @@
+import { forwardRef } from 'react';
+
 import { useTheme } from 'styled-components';
 
 import { IcXLine, IconContext } from '@/style';
@@ -6,22 +8,26 @@ import { TextField } from '../TextField';
 
 import { SimpleTextFieldProps } from './SimpleTextField.type';
 
-export const SimpleTextField = ({ onClickClearButton, ...props }: SimpleTextFieldProps) => {
-  const theme = useTheme();
+export const SimpleTextField = forwardRef<HTMLInputElement, SimpleTextFieldProps>(
+  ({ onClickClearButton, ...props }, ref) => {
+    const theme = useTheme();
 
-  return (
-    <TextField
-      suffix={
-        <IconContext.Provider
-          value={{
-            color: theme.color.buttonNormal,
-            size: '1rem',
-          }}
-        >
-          <IcXLine onClick={onClickClearButton} />
-        </IconContext.Provider>
-      }
-      {...props}
-    />
-  );
-};
+    return (
+      <TextField
+        ref={ref}
+        suffix={
+          <IconContext.Provider
+            value={{
+              color: theme.color.buttonNormal,
+              size: '1rem',
+            }}
+          >
+            <IcXLine onClick={onClickClearButton} />
+          </IconContext.Provider>
+        }
+        {...props}
+      />
+    );
+  }
+);
+SimpleTextField.displayName = 'SimpleTextField';
diff --git a/src/components/TextField/SuffixTextField/SuffixTextField.tsx b/src/components/TextField/SuffixTextField/SuffixTextField.tsx
@@ -1,7 +1,12 @@
+import { forwardRef } from 'react';
+
 import { TextField } from '../TextField';
 
 import { SuffixTextFieldProps } from './SuffixTextField.type';
 
-export const SuffixTextField = ({ suffix, ...props }: SuffixTextFieldProps) => {
-  return <TextField suffix={suffix} {...props} />;
-};
+export const SuffixTextField = forwardRef<HTMLInputElement, SuffixTextFieldProps>(
+  ({ suffix, ...props }, ref) => {
+    return <TextField ref={ref} suffix={suffix} {...props} />;
+  }
+);
+SuffixTextField.displayName = 'SuffixTextField';
diff --git a/src/components/TextField/TextField.style.ts b/src/components/TextField/TextField.style.ts
@@ -16,10 +16,6 @@ export const StyledSuffixIconContainer = styled.div`
   display: none;
 `;
 
-export const StyledSearchPrefixContainer = styled.div`
-  display: flex;
-`;
-
 export const StyledTextFieldWrapper = styled.div<StyledTextFieldProps>`
   width: ${({ $width }) => $width};
   height: 46px;
@@ -46,10 +42,15 @@ export const StyledTextFieldWrapper = styled.div<StyledTextFieldProps>`
           border: 1px solid ${theme.color.textPointed};
         `)}
 
-  input:focus + ${StyledSuffixIconContainer}, input:active + ${StyledSuffixIconContainer} {
+  input:focus + ${StyledSuffixIconContainer},
+  input:not(:disabled):active + ${StyledSuffixIconContainer} {
     display: flex;
     cursor: pointer;
   }
+
+  svg {
+    flex-shrink: 0;
+  }
 `;
 
 export const StyledTextField = styled.input<StyledTextFieldProps>`

diff --git a/src/components/TextField/TextField.tsx b/src/components/TextField/TextField.tsx
@@ -1,50 +1,57 @@
+import { forwardRef } from 'react';
+
 import {
   StyledFieldLabel,
   StyledHelperLabel,
-  StyledSearchPrefixContainer,
   StyledSuffixIconContainer,
   StyledSuffixText,
   StyledTextField,
   StyledTextFieldWrapper,
 } from './TextField.style';
 import { TextFieldProps } from './TextField.type';
 
-export const TextField = ({
-  isNegative = false,
-  isPositive = false,
-  isFocused = false,
-  isTyping = false,
-  fieldLabel,
-  helperLabel,
-  suffix,
-  searchPrefix,
-  width,
-  ...props
-}: TextFieldProps) => {
-  return (
-    <StyledFieldLabel $isDisabled={props.disabled}>
-      {fieldLabel}
-      <StyledTextFieldWrapper
-        $isNegative={isNegative}
-        $isPositive={isPositive}
-        $isFocused={isFocused}
-        $isTyping={isTyping}
-        $isDisabled={props.disabled}
-        $width={width}
-      >
-        <StyledSearchPrefixContainer>{searchPrefix}</StyledSearchPrefixContainer>
-        <StyledTextField {...props} />
-        {typeof suffix === 'string' ? (
-          <StyledSuffixText $isDisabled={props.disabled}>{suffix}</StyledSuffixText>
-        ) : (
-          <StyledSuffixIconContainer>{suffix}</StyledSuffixIconContainer>
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
+  (
+    {
+      isNegative = false,
+      isPositive = false,
+      isFocused = false,
+      isTyping = false,
+      fieldLabel,
+      helperLabel,
+      suffix,
+      searchPrefix,
+      width,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <StyledFieldLabel $isDisabled={props.disabled}>
+        {fieldLabel}
+        <StyledTextFieldWrapper
+          $isNegative={isNegative}
+          $isPositive={isPositive}
+          $isFocused={isFocused}
+          $isTyping={isTyping}
+          $isDisabled={props.disabled}
+          $width={width}
+        >
+          {searchPrefix}
+          <StyledTextField ref={ref} {...props} />
+          {typeof suffix === 'string' ? (
+            <StyledSuffixText $isDisabled={props.disabled}>{suffix}</StyledSuffixText>
+          ) : (
+            <StyledSuffixIconContainer>{suffix}</StyledSuffixIconContainer>
+          )}
+        </StyledTextFieldWrapper>
+        {helperLabel && (
+          <StyledHelperLabel $isNegative={isNegative} $isDisabled={props.disabled}>
+            {helperLabel}
+          </StyledHelperLabel>
         )}
-      </StyledTextFieldWrapper>
-      {helperLabel && (
-        <StyledHelperLabel $isNegative={isNegative} $isDisabled={props.disabled}>
-          {helperLabel}
-        </StyledHelperLabel>
-      )}
-    </StyledFieldLabel>
-  );
-};
+      </StyledFieldLabel>
+    );
+  }
+);
+TextField.displayName = 'TextField';