@dotss/ui 1.0.2 → 1.0.3

package/components/TextField/TextField.stories.tsx

@@ -0,0 +1,177 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Box from '@components/Box';
+
+import Button from '@components/Button';
+import Flexbox from '@components/Flexbox';
+
+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: {
+    id: 'outlined-text-field',
+    variant: 'outlined',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const Filled: Story = {
+  args: {
+    id: 'filled-text-field',
+    variant: 'filled',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const FullWidth: Story = {
+  decorators: [
+    (Story) => (
+      <Box
+        inlineCSS={{
+          width: '100vh'
+        }}
+      >
+        <Story />
+      </Box>
+    )
+  ],
+  args: {
+    id: 'full-width-text-field',
+    variant: 'outlined',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const PasswordVisibility: Story = {
+  args: {
+    id: 'password-visibility-text-field',
+    type: 'password',
+    variant: 'outlined',
+    size: 'large',
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const Success: Story = {
+  args: {
+    id: 'success-text-field',
+    variant: 'outlined',
+    size: 'large',
+    helper: {
+      severity: 'success'
+    },
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const Error: Story = {
+  args: {
+    id: 'error-text-field',
+    variant: 'outlined',
+    size: 'large',
+    helper: {
+      severity: 'error',
+      message: 'Error Message'
+    },
+    disabled: false,
+    placeholder: 'placeholder'
+  }
+};
+
+export const WithScreenReaderSupport: Story = {
+  render: (args) => {
+    const [helper, setHelper] = useState<{
+      severity: 'error' | 'success';
+      message?: string;
+    } | null>(null);
+    const handleClickError = () => {
+      setHelper({
+        severity: 'error',
+        message: '이름을 n자 이상 입력해주세요.'
+      });
+    };
+
+    const handleClickSuccess = () => {
+      setHelper({
+        severity: 'success'
+      });
+    };
+
+    return (
+      <Flexbox tag="form" flexDirection="column" gap={6} inlineCSS={{ width: '50vw' }}>
+        <Flexbox gap={2} alignItems="center">
+          <Flexbox tag="label" htmlFor={args.id} inlineCSS={{ width: 50 }}>
+            이름
+            {args?.['aria-required'] && (
+              <Flexbox tag="strong" aria-hidden inlineCSS={{ color: 'red' }}>
+                *
+              </Flexbox>
+            )}
+          </Flexbox>
+          <TextField {...args} helper={helper ?? undefined} fullWidth />
+        </Flexbox>
+        <Flexbox gap={2} justifyContent="flex-end">
+          <Button type="button" variant="outlined" size="large" onClick={handleClickError}>
+            에러 메시지 표시
+          </Button>
+          <Button type="button" size="large" onClick={handleClickSuccess}>
+            확인
+          </Button>
+        </Flexbox>
+      </Flexbox>
+    );
+  },
+  args: {
+    id: 'with-screen-reader-support-text-field',
+    name: 'with-screen-reader-support-text-field',
+    type: 'text',
+    'aria-required': true,
+    variant: 'outlined',
+    size: 'large',
+    disabled: false,
+    placeholder: '예: 홍길동',
+    helper: {
+      severity: 'error',
+      message: '이름을 n자 이상 입력해주세요.'
+    }
+  }
+};

package/components/TextField/TextField.styles.ts

@@ -0,0 +1,278 @@
+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, &::-webkit-input-placeholder, &::-ms-input-placeholder, &::-moz-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']
+      }
+    })}
+
+    &:focus {
+      outline: 'none';
+    }
+
+    &[type='password']::-ms-reveal {
+      display: none;
+    }
+`;
+
+export const PasswordVisibilityButton = styled.button`
+  &:empty {
+    display: none;
+  }
+`;
+
+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;
+  }}
+
+  &:empty {
+    display: none;
+  }
+`;

package/components/TextField/TextField.test.tsx

@@ -0,0 +1,43 @@
+import { composeStories } from '@storybook/react';
+import { waitFor } from '@storybook/test';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+
+import * as stories from './TextField.stories';
+
+const TextField = composeStories(stories);
+
+describe('TextField', () => {
+  it('비밀번호 입력 시 입력값이 노출되지 않는다.', async () => {
+    render(<TextField.PasswordVisibility aria-label="textFieldLabel" />);
+    const input = screen.getByLabelText('textFieldLabel');
+    await waitFor(() => expect(input).toHaveProperty('type', 'password'));
+  });
+
+  it('Eye 아이콘을 클릭하면 비번이 노출된다.', async () => {
+    render(<TextField.PasswordVisibility aria-label="textFieldLabel" />);
+    const input = screen.getByLabelText('textFieldLabel');
+    const user = await userEvent.setup();
+    const icon = screen.getByTestId('EyeInvisibleLine');
+
+    await waitFor(() => expect(input).toHaveProperty('type', 'password'));
+
+    user.click(icon);
+    user.type(input, 'password1234');
+
+    await waitFor(() => expect(input).toHaveProperty('type', 'text'));
+    await waitFor(() => expect(input).toHaveValue('password1234'));
+  });
+
+  it('helper message 가 노출된다.', async () => {
+    render(
+      <TextField.Error
+        aria-label="textFieldLabel"
+        helper={{ severity: 'error', message: '다시 입력해 주세요.' }}
+      />
+    );
+    const helper = screen.getByTestId('helper');
+    expect(helper).toHaveTextContent('다시 입력해 주세요.');
+  });
+});

package/components/TextField/TextField.tsx

@@ -0,0 +1,167 @@
+import type { FocusEvent, HTMLAttributes, InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef, useId, useState } from 'react';
+
+import Icon from '@components/Icon';
+import type { GeneralComponentProps, Size, Variant } from '@typings/component';
+
+import {
+  BaseTextField,
+  HelperMessage,
+  PasswordVisibilityButton,
+  StyledTextField,
+  Wrapper
+} from './TextField.styles';
+
+export interface TextFieldProps
+  extends GeneralComponentProps<Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>> {
+  variant?: Extract<Variant, 'outlined' | 'filled'>;
+  size?: Extract<Size, 'large' | 'xLarge' | '2xLarge'>;
+  startAdornment?: ReactNode;
+  endAdornment?: ReactNode;
+  helper?: {
+    severity: 'success' | 'error';
+    message?: string;
+  };
+  fullWidth?: boolean;
+  disablePasswordVisibility?: boolean;
+  helperProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
+  {
+    type = 'text',
+    variant = 'outlined',
+    size = 'large',
+    startAdornment,
+    endAdornment,
+    fullWidth,
+    helper,
+    disabled,
+    inlineCSS,
+    onFocus,
+    onBlur,
+    disablePasswordVisibility,
+    helperProps,
+    ...props
+  },
+  ref
+) {
+  const textFieldId = useId();
+  const helperMessageId = useId();
+
+  const [isFocus, setIsFocus] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const isActivePasswordVisibility =
+    !disablePasswordVisibility &&
+    !endAdornment &&
+    type === 'password' &&
+    helper?.severity !== 'success';
+
+  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
+    setIsFocus(true);
+
+    if (typeof onFocus === 'function') {
+      onFocus(e);
+    }
+  };
+
+  const handleBlur = (e: FocusEvent<HTMLInputElement>) => {
+    setIsFocus(false);
+
+    if (typeof onBlur === 'function') {
+      onBlur(e);
+    }
+  };
+
+  const handleClick = () => setIsVisible((prevState) => !prevState);
+
+  const inputType = () => {
+    if (isActivePasswordVisibility && isVisible) {
+      return 'text';
+    }
+    if (isActivePasswordVisibility && !isVisible) {
+      return 'password';
+    }
+
+    return type;
+  };
+
+  return (
+    <Wrapper fullWidth={fullWidth}>
+      <StyledTextField
+        variant={variant}
+        size={size}
+        focus={isFocus}
+        fullWidth={fullWidth}
+        helper={helper}
+        disabled={disabled}
+        css={inlineCSS}
+      >
+        {startAdornment}
+        <BaseTextField
+          ref={ref}
+          id={textFieldId}
+          type={inputType()}
+          variant={variant}
+          inputSize={size}
+          disabled={disabled}
+          aria-invalid={helper?.severity === 'error'}
+          aria-describedby={helper?.message ? helperMessageId : undefined}
+          {...props}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        {endAdornment}
+        {/* tictoccroc.brand.green 대신 green.70 으로 적용 */}
+        {/* 피그마 상에는 tictoccroc.brand.green 으로 정의되어 있으나, 다른 테마가 적용되는 경우를 고려하여 기본 Palette 구조에서의 ColorScale 적용 */}
+        {!endAdornment && helper?.severity === 'success' && (
+          <Icon name="CheckLine" color="green.70" aria-label="성공" role="img" />
+        )}
+        <PasswordVisibilityButton
+          type="button"
+          tabIndex={isActivePasswordVisibility ? 0 : -1}
+          aria-pressed={isActivePasswordVisibility ? isVisible : undefined}
+          onClick={handleClick}
+          aria-hidden={!isActivePasswordVisibility}
+          aria-label={
+            isActivePasswordVisibility && isVisible ? '비밀번호 표시됨' : '비밀번호 숨김됨'
+          }
+        >
+          {isActivePasswordVisibility && isVisible && (
+            <Icon
+              name="EyeVisibleLine"
+              data-testid="EyeVisibleLine"
+              inlineCSS={{
+                cursor: 'pointer'
+              }}
+            />
+          )}
+          {isActivePasswordVisibility && !isVisible && (
+            <Icon
+              name="EyeInvisibleLine"
+              data-testid="EyeInvisibleLine"
+              inlineCSS={{
+                cursor: 'pointer'
+              }}
+            />
+          )}
+        </PasswordVisibilityButton>
+      </StyledTextField>
+      <HelperMessage
+        id={helperMessageId}
+        className="textfield-helper"
+        aria-live={helper?.severity === 'error' ? 'assertive' : 'off'}
+        role={helper?.severity === 'error' ? 'alert' : 'status'}
+        helper={helper}
+        inputSize={size}
+        data-testid="helper"
+        {...helperProps}
+      >
+        {helper?.message}
+      </HelperMessage>
+    </Wrapper>
+  );
+});
+
+export default TextField;

package/components/TextField/index.ts

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