@dotss/ui 0.0.6 → 0.0.8

package/components/TextArea/TextArea.styles.ts

@@ -1,186 +0,0 @@
-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

@@ -1,130 +0,0 @@
-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

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

package/components/TextField/TextField.stories.tsx

@@ -1,107 +0,0 @@
-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

@@ -1,260 +0,0 @@
-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;
-  }}
-`;