@dotss/ui 0.0.4

package/components/TextArea/TextArea.styles.ts

@@ -0,0 +1,186 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { TextAreaProps } from '@components/TextArea/TextArea';
+
+export const StyledTextAreaWrapper = styled.div<
+  Pick<TextAreaProps, 'variant' | 'helper' | 'fullWidth' | 'disabled'> & { isFocused: boolean }
+>`
+  position: relative;
+  border-radius: 12px;
+  height: auto;
+  overflow: hidden;
+
+  ${({
+    theme: {
+      palette: { brand, background, grey }
+    },
+    variant,
+    isFocused
+  }): CSSObject => {
+    if (variant === 'filled') {
+      return {
+        backgroundColor: background.primary,
+        border: '1px solid transparent'
+      };
+    }
+    if (variant === 'outlined') {
+      if (isFocused) {
+        return {
+          backgroundColor: grey.white,
+          border: `1px solid ${brand.primary.line}`
+        };
+      }
+      return {
+        backgroundColor: grey.white,
+        border: `1px solid ${grey['50']}`
+      };
+    }
+    return {};
+  }};
+
+  ${({
+    theme: {
+      palette: { etc }
+    },
+    variant,
+    helper
+  }): CSSObject => {
+    if (variant === 'outlined') {
+      if (helper?.severity === 'error' || helper?.message) {
+        return {
+          borderColor: etc.red
+        };
+      }
+    }
+    return {};
+  }}
+
+  ${({
+    theme: {
+      palette: { grey }
+    },
+    variant,
+    disabled
+  }): CSSObject => {
+    if (variant === 'outlined') {
+      if (disabled) {
+        return {
+          backgroundColor: grey['10'],
+          borderColor: grey['30']
+        };
+      }
+    }
+    return {};
+  }}
+
+  ${({ fullWidth }): CSSObject => {
+    if (fullWidth) {
+      return {
+        width: '100%'
+      };
+    }
+    return {};
+  }}
+`;
+
+export const StyledTextArea = styled.textarea<{ minHeight: number }>`
+  width: 100%;
+  overflow: hidden;
+  resize: none;
+  border: none;
+  outline: 0;
+  background: transparent;
+  padding: ${({ theme }) =>
+    `${theme.spacing.content(3)}px ${theme.spacing.content(4)}px ${theme.spacing.content(2)}px`};
+  min-height: ${({ minHeight }) => minHeight}px;
+
+  ${({
+    theme: {
+      typography: { b2R }
+    }
+  }) => ({
+    fontSize: b2R.size,
+    fontWeight: b2R.weight,
+    lineHeight: b2R.lineHeight,
+    letterSpacing: b2R.letterSpacing
+  })};
+
+  @media (max-width: 360px) {
+    ${({
+      theme: {
+        typography: { b3R }
+      }
+    }) => ({
+      fontSize: b3R.size,
+      fontWeight: b3R.weight,
+      lineHeight: b3R.lineHeight,
+      letterSpacing: b3R.letterSpacing
+    })};
+  }
+
+  &::placeholder {
+    color: ${({ theme }) => theme.palette.grey['50']};
+    text-align: justify;
+  }
+
+  &[disabled] {
+    color: ${({ theme }) => theme.palette.grey['30']};
+    cursor: not-allowed;
+  }
+
+  &[disabled]::placeholder {
+    color: ${({ theme }) => theme.palette.grey['30']};
+  }
+`;
+
+export const StyledMaxLengthWrapper = styled.div<Pick<TextAreaProps, 'disabled'>>`
+  color: ${({ theme, disabled }) =>
+    disabled ? theme.palette.grey['30'] : theme.palette.grey['50']};
+  text-align: right;
+  padding-right: ${({ theme }) => theme.spacing.content(4)}px;
+  padding-bottom: ${({ theme }) => theme.spacing.content(3)}px;
+
+  ${({
+    theme: {
+      typography: { b4R }
+    }
+  }) => ({
+    fontSize: b4R.size,
+    fontWeight: b4R.weight,
+    lineHeight: b4R.lineHeight,
+    letterSpacing: b4R.letterSpacing
+  })};
+
+  & > span {
+    color: ${({ theme, disabled }) =>
+      disabled ? theme.palette.grey['30'] : theme.palette.grey['100']};
+  }
+`;
+
+export const StyledHelperMessage = styled.p<Pick<TextAreaProps, 'helper'>>`
+  margin-top: ${({ theme: { spacing } }) => spacing.content(1)}px;
+  color: ${({ theme }) => theme.palette.etc.red};
+
+  ${({
+    theme: {
+      typography: { c3R }
+    }
+  }) => ({
+    fontSize: c3R.size,
+    fontWeight: c3R.weight,
+    lineHeight: c3R.lineHeight,
+    letterSpacing: c3R.letterSpacing
+  })};
+`;
+
+export const VisuallyHidden = styled.p`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+`;

package/components/TextArea/TextArea.tsx

@@ -0,0 +1,130 @@
+import type { ChangeEvent, FocusEvent, HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { forwardRef, useEffect, useId, useRef, useState } from 'react';
+
+import {
+  StyledHelperMessage,
+  StyledMaxLengthWrapper,
+  StyledTextArea,
+  StyledTextAreaWrapper,
+  VisuallyHidden
+} from '@components/TextArea/TextArea.styles';
+import type { GeneralComponentProps, Size, Variant } from '@typings/component';
+
+export interface TextAreaProps
+  extends GeneralComponentProps<TextareaHTMLAttributes<HTMLTextAreaElement>> {
+  value: string;
+  variant?: Extract<Variant, 'filled' | 'outlined'>;
+  size?: Extract<Size, 'large' | 'small'>;
+  helper?: {
+    severity: 'success' | 'error';
+    message?: string;
+  };
+  fullWidth?: boolean;
+  wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
+}
+
+const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  (
+    {
+      onChange,
+      value,
+      variant = 'filled',
+      size = 'large',
+      maxLength = 290,
+      onFocus,
+      onBlur,
+      helper,
+      disabled = false,
+      wrapperProps,
+      ...props
+    }: TextAreaProps,
+    ref
+  ) => {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const minHeight = useRef<number>(size === 'large' ? 112.5 : 57.5);
+    const [isFocused, setIsFocused] = useState<boolean>(false);
+    const id = useId();
+
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+      if (e.target.value.length > maxLength) {
+        e.target.value = e.target.value.slice(0, maxLength);
+      }
+      if (typeof onChange === 'function') {
+        onChange(e);
+      }
+    };
+    const handleFocus = (e: FocusEvent<HTMLTextAreaElement>) => {
+      setIsFocused(true);
+
+      if (typeof onFocus === 'function') {
+        onFocus(e);
+      }
+    };
+    const handleBlur = (e: FocusEvent<HTMLTextAreaElement>) => {
+      setIsFocused(false);
+
+      if (typeof onBlur === 'function') {
+        onBlur(e);
+      }
+    };
+
+    const handleBottomClick = () => {
+      const textArea = wrapperRef.current?.querySelector('textarea');
+      if (textArea) {
+        textArea.focus();
+      }
+    };
+
+    useEffect(() => {
+      const textArea = wrapperRef.current?.querySelector('textarea');
+      if (textArea) {
+        textArea.style.height = 'auto';
+        const { scrollHeight, clientHeight } = textArea;
+        textArea.style.height = `${minHeight.current}px`;
+        textArea.style.height = `${Math.max(scrollHeight, minHeight.current, clientHeight)}px`;
+      }
+    }, [value]);
+
+    return (
+      <div>
+        <StyledTextAreaWrapper
+          ref={wrapperRef}
+          isFocused={isFocused}
+          variant={variant}
+          helper={helper}
+          disabled={disabled}
+          {...wrapperProps}
+          css={wrapperProps?.inlineCSS}
+        >
+          <StyledTextArea
+            ref={ref}
+            onChange={handleChange}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
+            value={value}
+            disabled={disabled}
+            aria-invalid={helper?.severity === 'error'}
+            aria-describedby={helper?.message ? id : undefined}
+            minHeight={minHeight.current}
+            {...props}
+          />
+          <StyledMaxLengthWrapper disabled={disabled} onClick={handleBottomClick}>
+            (<span>{value.length}</span> / {maxLength})
+          </StyledMaxLengthWrapper>
+        </StyledTextAreaWrapper>
+        {helper?.message && !disabled && (
+          <StyledHelperMessage id={id} helper={helper}>
+            {helper.message}
+          </StyledHelperMessage>
+        )}
+        {value.length >= maxLength && (
+          <VisuallyHidden aria-live="assertive" role="alert">
+            최대 입력 글자 수에 도달하였습니다. {maxLength} 자까지 입력이 가능합니다.
+          </VisuallyHidden>
+        )}
+      </div>
+    );
+  }
+);
+
+export default TextArea;

package/components/TextArea/index.ts

@@ -0,0 +1,3 @@
+import TextArea from './TextArea';
+
+export default TextArea;

package/components/TextField/TextField.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Box from '@components/Box';
+
+import TextField from './TextField';
+
+const meta = {
+  title: 'Component/TextField',
+  component: TextField,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    helper: {
+      control: {
+        disable: true
+      }
+    },
+    startAdornment: {
+      control: {
+        disable: true
+      }
+    },
+    endAdornment: {
+      control: {
+        disable: true
+      }
+    }
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Outlined: Story = {
+  args: {
+    variant: 'outlined',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const Filled: Story = {
+  args: {
+    variant: 'filled',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const FullWidth: Story = {
+  decorators: [
+    (Story) => (
+      <Box
+        inlineCSS={{
+          width: '100vh'
+        }}
+      >
+        <Story />
+      </Box>
+    )
+  ],
+  args: {
+    variant: 'outlined',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const PasswordVisibility: Story = {
+  args: {
+    type: 'password',
+    variant: 'outlined',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const Success: Story = {
+  args: {
+    variant: 'outlined',
+    size: 'large',
+    helper: {
+      severity: 'success'
+    },
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const Error: Story = {
+  args: {
+    variant: 'outlined',
+    size: 'large',
+    helper: {
+      severity: 'error',
+      message: 'Error Message'
+    },
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};

package/components/TextField/TextField.styles.ts

@@ -0,0 +1,260 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { TextFieldProps } from './TextField';
+
+export const Wrapper = styled.div<Pick<TextFieldProps, 'fullWidth'>>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  ${({ fullWidth }): CSSObject | null => (fullWidth ? { width: '100%' } : null)};
+`;
+
+export const StyledTextField = styled.div<
+  Pick<TextFieldProps, 'variant' | 'size' | 'fullWidth' | 'helper' | 'disabled'> & {
+    focus: boolean;
+  }
+>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+  border: 1px solid transparent;
+
+  ${({
+    theme: {
+      palette: { green, grey, background, etc }
+    },
+    variant,
+    helper
+  }): CSSObject => {
+    let cssObject: CSSObject = {
+      backgroundColor: grey.white,
+      borderColor: grey['50'],
+      color: grey['100']
+    };
+
+    switch (variant) {
+      case 'outlined':
+        if (helper?.severity === 'success') {
+          cssObject = {
+            ...cssObject,
+            borderColor: `${green['70']} !important`
+          };
+        }
+
+        if (helper?.severity === 'error') {
+          cssObject = {
+            ...cssObject,
+            borderColor: `${etc.red} !important`
+          };
+        }
+
+        break;
+      case 'filled':
+        cssObject = {
+          backgroundColor: background.primary
+        };
+        break;
+      default:
+        break;
+    }
+
+    return cssObject;
+  }};
+
+  ${({ theme: { spacing }, size }): CSSObject => {
+    let cssObject: CSSObject = {
+      maxHeight: 48,
+      padding: `${spacing.content(3)}px ${spacing.content(4)}px`,
+      borderRadius: 10
+    };
+
+    switch (size) {
+      case '2xLarge':
+        cssObject = {
+          maxHeight: 80,
+          padding: `${spacing.content(4)}px ${spacing.content(5)}px`,
+          borderRadius: 12,
+          '& svg': {
+            width: 48,
+            height: 48
+          }
+        };
+        break;
+      case 'xLarge':
+        cssObject = {
+          maxHeight: 56,
+          padding: spacing.content(4),
+          borderRadius: 12
+        };
+        break;
+      default:
+        break;
+    }
+
+    return cssObject;
+  }};
+
+  ${({
+    theme: {
+      palette: { brand }
+    },
+    variant,
+    focus
+  }): CSSObject | null => {
+    if (variant === 'outlined' && focus) {
+      return {
+        borderColor: brand.primary.line
+      };
+    }
+
+    return null;
+  }};
+
+  ${({ fullWidth }): CSSObject | null => (fullWidth ? { width: '100%' } : null)};
+
+  ${({
+    theme: {
+      palette: { grey }
+    },
+    variant,
+    disabled
+  }): CSSObject | null => {
+    if (!disabled) return null;
+
+    let cssObject: CSSObject = {
+      backgroundColor: grey['10'],
+      borderColor: grey['30']
+    };
+
+    switch (variant) {
+      case 'filled':
+        cssObject = {
+          backgroundColor: grey['10']
+        };
+        break;
+      default:
+        break;
+    }
+
+    return cssObject;
+  }}
+`;
+
+export const BaseTextField = styled.input<
+  Pick<TextFieldProps, 'variant'> & { inputSize: TextFieldProps['size'] }
+>`
+  width: inherit;
+  flex-grow: 1;
+  border: none;
+  background-color: transparent;
+  outline: 0;
+
+  ${({
+    theme: {
+      typography: { b2R, h0R }
+    },
+    inputSize
+  }): CSSObject => {
+    if (inputSize === '2xLarge') {
+      return {
+        fontSize: h0R.size,
+        fontWeight: h0R.weight,
+        lineHeight: h0R.lineHeight,
+        letterSpacing: h0R.letterSpacing
+      };
+    }
+    return {
+      fontSize: b2R.size,
+      fontWeight: b2R.weight,
+      lineHeight: b2R.lineHeight,
+      letterSpacing: b2R.letterSpacing
+    };
+  }};
+
+  &::placeholder {
+    ${({
+      theme: {
+        palette: { grey }
+      },
+      variant
+    }): CSSObject => {
+      const cssObject: CSSObject = {
+        color: grey['50']
+      };
+
+      switch (variant) {
+        case 'filled':
+          break;
+        default:
+          break;
+      }
+
+      return cssObject;
+    }};
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    
+    ${({
+      theme: {
+        palette: { grey }
+      }
+    }): CSSObject => ({
+      color: grey['30'],
+      '&::placeholder': {
+        color: grey['30']
+      }
+    })}
+`;
+
+export const HelperMessage = styled.div<
+  Pick<TextFieldProps, 'helper'> & { inputSize: TextFieldProps['size'] }
+>`
+  position: absolute;
+  left: 0;
+  bottom: ${({ inputSize }) => (inputSize === '2xLarge' ? '-26px' : '-16px')};
+  white-space: nowrap;
+  ${({
+    theme: {
+      typography: { c3R, b1R }
+    },
+    inputSize
+  }) => {
+    if (inputSize === '2xLarge') {
+      return {
+        fontSize: b1R.size,
+        fontWeight: b1R.weight,
+        lineHeight: b1R.lineHeight,
+        letterSpacing: b1R.letterSpacing
+      };
+    }
+    return {
+      fontSize: c3R.size,
+      fontWeight: c3R.weight,
+      lineHeight: c3R.lineHeight,
+      letterSpacing: c3R.letterSpacing
+    };
+  }};
+
+  ${({
+    theme: {
+      palette: { etc, grey }
+    },
+    helper
+  }): CSSObject | null => {
+    const cssObject: CSSObject = {
+      color: grey['100']
+    };
+
+    if (helper?.severity === 'error') {
+      return {
+        color: etc.red
+      };
+    }
+
+    return cssObject;
+  }}
+`;