@dotss/ui 0.0.7 → 0.0.8

package/components/TextField/TextField.test.tsx

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

@@ -1,137 +0,0 @@
-import type { FocusEvent, InputHTMLAttributes, ReactNode } from 'react';
-import { forwardRef, useState } from 'react';
-
-import Icon from '@components/Icon';
-import type { GeneralComponentProps, Size, Variant } from '@typings/component';
-
-import { BaseTextField, HelperMessage, 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;
-}
-
-const TextField = forwardRef<HTMLInputElement, TextFieldProps>(function TextField(
-  {
-    type,
-    variant = 'outlined',
-    size = 'large',
-    startAdornment,
-    endAdornment,
-    fullWidth,
-    helper,
-    disabled,
-    inlineCSS,
-    onFocus,
-    onBlur,
-    disablePasswordVisibility,
-    ...props
-  },
-  ref
-) {
-  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}
-          type={inputType()}
-          variant={variant}
-          inputSize={size}
-          disabled={disabled}
-          {...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" />
-        )}
-        {isActivePasswordVisibility && isVisible && (
-          <Icon
-            name="EyeVisibleLine"
-            data-testid="EyeVisibleLine"
-            onClick={handleClick}
-            inlineCSS={{
-              cursor: 'pointer'
-            }}
-          />
-        )}
-        {isActivePasswordVisibility && !isVisible && (
-          <Icon
-            name="EyeInvisibleLine"
-            data-testid="EyeInvisibleLine"
-            onClick={handleClick}
-            inlineCSS={{
-              cursor: 'pointer'
-            }}
-          />
-        )}
-      </StyledTextField>
-      {helper?.message && (
-        <HelperMessage helper={helper} inputSize={size} data-testid="helper">
-          {helper?.message}
-        </HelperMessage>
-      )}
-    </Wrapper>
-  );
-});
-
-export default TextField;

package/components/TextField/index.ts

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

package/components/Tooltip/Tooltip.stories.tsx

@@ -1,162 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Icon from '@components/Icon';
-
-import Tooltip from './Tooltip';
-
-const meta = {
-  title: 'Component/Tooltip',
-  component: Tooltip,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text'
-      }
-    },
-    placement: {
-      options: [
-        'bottom-left',
-        'bottom-center',
-        'bottom-right',
-        'left-top',
-        'left-middle',
-        'left-bottom',
-        'top-left',
-        'top-center',
-        'top-right',
-        'right-top',
-        'right-middle',
-        'right-bottom'
-      ],
-      control: {
-        type: 'select'
-      }
-    },
-    color: {
-      options: ['primary', 'secondary'],
-      control: {
-        type: 'radio'
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Tooltip>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const WithTitleBody: Story = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
-    const handleOpen = () => {
-      setOpen((prev) => !prev);
-    };
-
-    useEffect(() => {
-      setOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Tooltip
-        open={open}
-        onClose={handleOpen}
-        title={props.title}
-        body={props.body}
-        closer={props.closer}
-        color={props.color}
-        placement={props.placement}
-        endAdornment={props.endAdornment}
-      >
-        <Icon name="TooltipFill" size="medium" onClick={handleOpen} />
-      </Tooltip>
-    );
-  },
-  args: {
-    title: 'Tooltip Title',
-    body: 'Tooltip Body',
-    open: false,
-    closer: true,
-    color: 'primary',
-    placement: 'bottom-right',
-    endAdornment: ''
-  }
-};
-
-export const WithBody: Story = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
-    const handleOpen = () => {
-      setOpen((prev) => !prev);
-    };
-
-    useEffect(() => {
-      setOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Tooltip
-        open={open}
-        onClose={handleOpen}
-        title={props.title}
-        body={props.body}
-        closer={props.closer}
-        color={props.color}
-        placement={props.placement}
-        endAdornment={props.endAdornment}
-      >
-        <Icon name="TooltipFill" size="medium" onClick={handleOpen} />
-      </Tooltip>
-    );
-  },
-  args: {
-    title: '',
-    body: 'Tooltip Body',
-    open: true,
-    closer: true,
-    color: 'primary',
-    placement: 'left-middle',
-    endAdornment: ''
-  }
-};
-
-export const EndAdornment: Story = {
-  render: (props) => {
-    const [open, setOpen] = useState(false);
-    const handleOpen = () => {
-      setOpen((prev) => !prev);
-    };
-
-    useEffect(() => {
-      setOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Tooltip
-        title={props.title}
-        body={props.body}
-        open={open}
-        closer={props.closer}
-        onClose={handleOpen}
-        color={props.color}
-        placement={props.placement}
-        endAdornment={props.endAdornment}
-      >
-        <Icon name="TooltipFill" size="medium" onClick={handleOpen} />
-      </Tooltip>
-    );
-  },
-  args: {
-    title: 'Title',
-    body: '가입하고 10% 할인 받기 가입하고 10% 할인 받기',
-    open: true,
-    closer: true,
-    color: 'primary',
-    placement: 'top-right',
-    endAdornment: '🥳'
-  }
-};

package/components/Tooltip/Tooltip.styles.ts

@@ -1,278 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { TooltipProps } from './Tooltip';
-
-export const StyledTooltipContainer = styled.div<{ open: boolean }>`
-  position: relative;
-  display: inline-block;
-  &[open] > .tooltip {
-    display: flex;
-  }
-`;
-
-export const StyledTooltip = styled.div<Pick<TooltipProps, 'placement' | 'color' | 'closer'>>`
-  position: absolute;
-  display: none;
-  flex-direction: column;
-  gap: ${({ theme: { spacing } }) => `${spacing.content(1)}px`};
-  padding: ${({ theme: { spacing } }) => `${spacing.content(3)}px`};
-  border-radius: 8px;
-  width: auto;
-  height: auto;
-  max-width: 300px;
-  max-height: calc(136px - 8px);
-  z-index: 100003;
-  white-space: nowrap;
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    color
-  }): CSSObject => {
-    let cssObject = {};
-    if (color === 'primary') {
-      cssObject = {
-        backgroundColor: brand.primary.tooltip,
-        color: grey['100']
-      };
-    }
-    if (color === 'secondary') {
-      cssObject = {
-        backgroundColor: grey['80'],
-        color: grey.white
-      };
-    }
-    return cssObject;
-  }}
-
-  ${({ theme: { typography } }): CSSObject => {
-    return {
-      fontSize: typography.b4R.size,
-      fontWeight: typography.b4R.weight,
-      lineHeight: typography.b4R.lineHeight,
-      letterSpacing: typography.b4R.letterSpacing,
-      '& svg:not(.tooltip__closer)': {
-        width: 24,
-        height: 24
-      }
-    };
-  }};
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    placement,
-    color
-  }): CSSObject => {
-    let cssObject = {};
-    switch (placement) {
-      case 'bottom-left':
-        cssObject = {
-          top: '-12px',
-          left: '-6px',
-          transform: 'translateY(-100%)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '100%',
-            left: '12px',
-            borderTop: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderRight: '6px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'bottom-center':
-        cssObject = {
-          top: '-12px',
-          left: '50%',
-          transform: 'translate(-50%, -100%)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '100%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            borderTop: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderRight: '6px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'bottom-right':
-        cssObject = {
-          top: '-12px',
-          right: '-6px',
-          transform: 'translateY(-100%)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '100%',
-            right: '12px',
-            borderTop: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderRight: '6px solid transparent',
-            borderBottom: '8px solid transparent',
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'left-top':
-        cssObject = {
-          top: '-6px',
-          left: 'calc(100% + 12px)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '12px',
-            right: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderBottom: '6px solid transparent',
-            borderLeft: '8px solid transparent'
-          }
-        };
-        break;
-      case 'left-middle':
-        cssObject = {
-          top: '50%',
-          left: 'calc(100% + 12px)',
-          transform: 'translateY(-50%)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            right: '100%',
-            transform: 'translateY(-50%)',
-            borderTop: '6px solid transparent',
-            borderRight: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderBottom: '6px solid transparent',
-            borderLeft: '8px solid transparent'
-          }
-        };
-        break;
-      case 'left-bottom':
-        cssObject = {
-          bottom: '-6px',
-          left: 'calc(100% + 12px)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '12px',
-            right: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderBottom: '6px solid transparent',
-            borderLeft: '8px solid transparent'
-          }
-        };
-        break;
-      case 'top-left':
-        cssObject = {
-          left: '-6px',
-          transform: 'translate(0, 12px)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '100%',
-            left: '12px',
-            borderTop: '8px solid transparent',
-            borderRight: '6px solid transparent',
-            borderBottom: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'top-center':
-        cssObject = {
-          right: '50%',
-          transform: 'translate(50%, 12px)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '100%',
-            left: '50%',
-            transform: 'translateX(-50%)',
-            borderTop: '8px solid transparent',
-            borderRight: '6px solid transparent',
-            borderBottom: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'top-right':
-        cssObject = {
-          right: '-6px',
-          transform: 'translate(0, 12px)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '100%',
-            right: '12px',
-            borderTop: '8px solid transparent',
-            borderRight: '6px solid transparent',
-            borderBottom: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`,
-            borderLeft: '6px solid transparent'
-          }
-        };
-        break;
-      case 'right-top':
-        cssObject = {
-          top: '-6px',
-          right: 'calc(100% + 12px)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '12px',
-            left: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: '8px solid transparent',
-            borderBottom: '6px solid transparent',
-            borderLeft: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`
-          }
-        };
-        break;
-      case 'right-middle':
-        cssObject = {
-          top: '50%',
-          right: 'calc(100% + 12px)',
-          transform: 'translateY(-50%)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            top: '50%',
-            left: '100%',
-            transform: 'translateY(-50%)',
-            borderTop: '6px solid transparent',
-            borderRight: '8px solid transparent',
-            borderBottom: '6px solid transparent',
-            borderLeft: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`
-          }
-        };
-        break;
-      case 'right-bottom':
-        cssObject = {
-          bottom: '-6px',
-          right: 'calc(100% + 12px)',
-          '&:after': {
-            content: '""',
-            position: 'absolute',
-            bottom: '12px',
-            left: '100%',
-            borderTop: '6px solid transparent',
-            borderRight: '8px solid transparent',
-            borderBottom: '6px solid transparent',
-            borderLeft: `8px solid ${color === 'primary' ? brand.primary.tooltip : grey['80']}`
-          }
-        };
-        break;
-      default:
-        break;
-    }
-    return cssObject;
-  }};
-`;