@dotss/ui 0.0.6 → 0.0.8

package/components/Button/Button.stories.tsx

@@ -1,136 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Box from '@components/Box';
-import Icon from '@components/Icon';
-
-import Button from './Button';
-
-const meta = {
-  title: 'Component/Button',
-  component: Button,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    startAdornment: {
-      control: {
-        disable: true
-      }
-    },
-    endAdornment: {
-      control: {
-        disable: true
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Filled: Story = {
-  args: {
-    children: 'BUTTON',
-    variant: 'filled',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    rounded: true
-  }
-};
-
-export const Outlined: Story = {
-  args: {
-    children: 'BUTTON',
-    variant: 'outlined',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    rounded: true
-  }
-};
-
-export const Text: Story = {
-  args: {
-    children: 'BUTTON',
-    variant: 'text',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    rounded: true
-  }
-};
-
-export const FullWidth: Story = {
-  decorators: [
-    (Story) => (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <Story />
-      </Box>
-    )
-  ],
-  args: {
-    children: 'BUTTON',
-    variant: 'filled',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    fullWidth: true,
-    rounded: true
-  }
-};
-
-export const StartAdornment: Story = {
-  args: {
-    children: 'BUTTON',
-    variant: 'filled',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    startAdornment: <Icon name="PlusLine" />,
-    rounded: true
-  }
-};
-
-export const EndAdornment: Story = {
-  args: {
-    children: 'BUTTON',
-    variant: 'filled',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    endAdornment: <Icon name="ChevronRightLine" />,
-    rounded: true
-  }
-};
-
-export const BothAdornment: Story = {
-  args: {
-    children: 'BUTTON',
-    variant: 'filled',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    startAdornment: <Icon name="PlusLine" />,
-    endAdornment: <Icon name="ChevronRightLine" />,
-    rounded: true
-  }
-};
-
-export const IconOnly: Story = {
-  args: {
-    children: 'BUTTON',
-    variant: 'filled',
-    color: 'primary',
-    size: 'medium',
-    disabled: false,
-    startAdornment: <Icon name="SearchLine" />,
-    iconOnly: true,
-    rounded: true
-  }
-};

package/components/Button/Button.styles.ts

@@ -1,420 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { ButtonProps } from './Button';
-import getContrastingTextColor from '../../utils/getContrastingTextColor/getContrastingTextColor';
-
-export const StyledButton = styled.button<
-  Pick<
-    ButtonProps,
-    | 'variant'
-    | 'size'
-    | 'color'
-    | 'fullWidth'
-    | 'rounded'
-    | 'startAdornment'
-    | 'endAdornment'
-    | 'iconOnly'
-  > & { isHoverPossible: boolean }
->`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid transparent;
-  & svg {
-    color: inherit;
-  }
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    variant,
-    color
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      backgroundColor: brand.primary.main,
-      color: getContrastingTextColor(brand.primary.main, [grey.white, grey['100']])
-    };
-
-    if (variant === 'filled' && color === 'secondary') {
-      cssObject = {
-        backgroundColor: brand.secondary,
-        color: getContrastingTextColor(brand.secondary, [grey.white, grey['100']])
-      };
-    }
-
-    if (variant === 'filled' && color === 'tertiary') {
-      cssObject = {
-        backgroundColor: brand.tertiary,
-        color: getContrastingTextColor(brand.tertiary, [grey.white, grey['100']])
-      };
-    }
-
-    if (variant === 'outlined') {
-      cssObject = {
-        borderColor: grey['50'],
-        backgroundColor: grey.white,
-        color: getContrastingTextColor(grey.white, [grey.white, grey['100']])
-      };
-    }
-
-    if (variant === 'text' && color === 'primary') {
-      cssObject = {
-        backgroundColor: 'transparent',
-        color: getContrastingTextColor('transparent', [grey.white, grey['100']])
-      };
-    }
-
-    if (variant === 'text' && color === 'secondary') {
-      cssObject = {
-        backgroundColor: 'transparent',
-        color: grey['70']
-      };
-    }
-
-    return cssObject;
-  }};
-
-  ${({
-    theme: { spacing, typography },
-    variant,
-    size,
-    startAdornment,
-    endAdornment,
-    iconOnly
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      gap: spacing.content(1),
-      padding: 10,
-      borderRadius: 8,
-      fontSize: typography.b4M.size,
-      fontWeight: typography.b4M.weight,
-      lineHeight: typography.b4M.lineHeight,
-      letterSpacing: typography.b4M.letterSpacing,
-      '& svg': {
-        width: 20,
-        height: 20
-      }
-    };
-
-    if (size === '2xLarge') {
-      const { h0B } = typography;
-      let padding = '26px 24px';
-      if (startAdornment) {
-        padding = variant === 'text' ? '26px 16px 26px 12px' : '26px 36px 26px 24px';
-      }
-      if (endAdornment) {
-        padding = variant === 'text' ? '26px 12px 26px 16px' : '26px 24px 26px 36px';
-      }
-      if (startAdornment && endAdornment) {
-        padding = variant === 'text' ? '26px 12px' : '26px 24px';
-      }
-      if (iconOnly) {
-        padding = '26px 25px';
-      }
-
-      cssObject = {
-        gap: spacing.content(3),
-        maxHeight: 100,
-        padding,
-        borderRadius: 20,
-        fontSize: h0B.size,
-        fontWeight: h0B.weight,
-        lineHeight: h0B.lineHeight,
-        letterSpacing: h0B.letterSpacing,
-        '& svg': {
-          width: 48,
-          height: 48
-        }
-      };
-    }
-
-    if (size === 'xLarge') {
-      const { h4B } = typography;
-      let padding = '16px 12px';
-      if (startAdornment) {
-        padding = variant === 'text' ? '16px 8px 16px 4px' : '16px 16px 16px 12px';
-      }
-      if (endAdornment) {
-        padding = variant === 'text' ? '16px 4px 16px 8px' : '16px 12px 16px 16px';
-      }
-      if (startAdornment && endAdornment) {
-        padding = variant === 'text' ? '16px 4px' : '16px 12px';
-      }
-      if (iconOnly) {
-        padding = '16px 15px';
-      }
-
-      cssObject = {
-        gap: spacing.content(2),
-        maxHeight: 56,
-        padding,
-        borderRadius: 12,
-        fontSize: h4B.size,
-        fontWeight: h4B.weight,
-        lineHeight: h4B.lineHeight,
-        letterSpacing: h4B.letterSpacing,
-        '& svg': {
-          width: 24,
-          height: 24
-        }
-      };
-    }
-
-    if (size === 'large') {
-      const { b2M } = typography;
-      let padding = '12px 8px';
-      if (startAdornment) {
-        padding = variant === 'text' ? '12px 8px 12px 4px' : '12px 12px 12px 8px';
-      }
-      if (endAdornment) {
-        padding = variant === 'text' ? '12px 4px 12px 8px' : '12px 8px 12px 12px';
-      }
-      if (startAdornment && endAdornment) {
-        padding = variant === 'text' ? '12px 4px' : '12px 8px';
-      }
-      if (iconOnly) {
-        padding = '12px 11px';
-      }
-
-      cssObject = {
-        gap: 6,
-        maxHeight: 48,
-        padding,
-        borderRadius: 10,
-        fontSize: b2M.size,
-        fontWeight: b2M.weight,
-        lineHeight: b2M.lineHeight,
-        letterSpacing: b2M.letterSpacing,
-        '& svg': {
-          width: 24,
-          height: 24
-        }
-      };
-    }
-
-    if (size === 'medium') {
-      const { b4M } = typography;
-      let padding = '10px 8px';
-      if (startAdornment) {
-        padding = variant === 'text' ? '10px 8px 10px 4px' : '10px 10px 10px 8px';
-      }
-      if (endAdornment) {
-        padding = variant === 'text' ? '10px 4px 10px 8px' : '10px 8px 10px 10px';
-      }
-      if (startAdornment && endAdornment) {
-        padding = variant === 'text' ? '10px 4px' : '10px 8px';
-      }
-      if (iconOnly) {
-        padding = '10px 9px';
-      }
-
-      cssObject = {
-        gap: spacing.content(1),
-        maxHeight: 40,
-        padding,
-        borderRadius: 8,
-        fontSize: b4M.size,
-        fontWeight: b4M.weight,
-        lineHeight: b4M.lineHeight,
-        letterSpacing: b4M.letterSpacing,
-        '& svg': {
-          width: 20,
-          height: 20
-        }
-      };
-    }
-
-    if (size === 'small') {
-      const { c3M } = typography;
-      let padding = '8px 6px';
-      if (startAdornment) {
-        padding = variant === 'text' ? '8px 8px 8px 4px' : '8px 8px 8px 6px';
-      }
-      if (endAdornment) {
-        padding = variant === 'text' ? '8px 4px 8px 8px' : '8px 6px 8px 8px';
-      }
-      if (startAdornment && endAdornment) {
-        padding = variant === 'text' ? '8px 6px' : '8px 4px';
-      }
-      if (iconOnly) {
-        padding = '8px 7px';
-      }
-
-      cssObject = {
-        gap: spacing.content(1),
-        maxHeight: 32,
-        padding,
-        borderRadius: 6,
-        fontSize: c3M.size,
-        fontWeight: c3M.weight,
-        lineHeight: c3M.lineHeight,
-        letterSpacing: c3M.letterSpacing,
-        '& svg': {
-          width: 16,
-          height: 16
-        }
-      };
-    }
-
-    if (size === 'xSmall') {
-      const { c3M } = typography;
-      let padding = '4px 6px';
-      if (startAdornment) {
-        padding = variant === 'text' ? '4px 8px 4px 4px' : '4px 8px 4px 6px';
-      }
-      if (endAdornment) {
-        padding = variant === 'text' ? '4px 4px 4px 8px' : '4px 6px 4px 8px';
-      }
-      if (startAdornment && endAdornment) {
-        padding = variant === 'text' ? '4px' : '4px 6px';
-      }
-      if (iconOnly) {
-        padding = '4px 3px';
-      }
-
-      if (iconOnly) {
-        cssObject = {
-          gap: spacing.content(1),
-          maxHeight: 24,
-          width: 24,
-          height: 24,
-          borderRadius: 6,
-          fontSize: c3M.size,
-          fontWeight: c3M.weight,
-          lineHeight: c3M.lineHeight,
-          letterSpacing: c3M.letterSpacing,
-          '& svg': {
-            width: 16,
-            height: 16
-          }
-        };
-      } else {
-        cssObject = {
-          gap: spacing.content(1),
-          maxHeight: 24,
-          padding,
-          borderRadius: 6,
-          fontSize: c3M.size,
-          fontWeight: c3M.weight,
-          lineHeight: c3M.lineHeight,
-          letterSpacing: c3M.letterSpacing,
-          '& svg': {
-            width: 16,
-            height: 16
-          }
-        };
-      }
-    }
-
-    if (variant === 'text' && size === 'xLarge') {
-      cssObject = {
-        ...cssObject,
-        borderWidth: 1.5
-      };
-    }
-
-    return cssObject;
-  }};
-
-  ${({ rounded }): CSSObject => {
-    if (!rounded) {
-      return {
-        borderRadius: 'unset'
-      };
-    }
-    return {};
-  }}
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    variant,
-    color,
-    isHoverPossible
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      '&:active:not([aria-disabled="true"])': { backgroundColor: brand.primary.press },
-      ...(isHoverPossible
-        ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: brand.primary.press } }
-        : {})
-    };
-
-    if (variant === 'filled' && color === 'secondary') {
-      cssObject = {
-        '&:active:not([aria-disabled="true"])': { backgroundColor: grey['100'] },
-        ...(isHoverPossible
-          ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: grey['100'] } }
-          : {})
-      };
-    }
-
-    if (variant === 'filled' && color === 'tertiary') {
-      cssObject = {
-        '&:active:not([aria-disabled="true"])': { backgroundColor: grey['70'] },
-        ...(isHoverPossible
-          ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: grey['70'] } }
-          : {})
-      };
-    }
-
-    if (variant === 'outlined' || variant === 'text') {
-      cssObject = {
-        '&:active:not([aria-disabled="true"])': { backgroundColor: grey['10'] },
-        ...(isHoverPossible
-          ? { '&:hover:not([aria-disabled="true"])': { backgroundColor: grey['10'] } }
-          : {})
-      };
-    }
-
-    return cssObject;
-  }}
-
-  &[aria-disabled="true"] {
-    cursor: not-allowed;
-    ${({
-      theme: {
-        palette: { brand, grey }
-      },
-      variant,
-      color
-    }): CSSObject => {
-      let cssObject: CSSObject = {
-        backgroundColor: brand.primary.disable,
-        color: getContrastingTextColor(brand.primary.disable, [grey['30'], grey.white])
-      };
-
-      if (variant === 'filled' && color === 'secondary') {
-        cssObject = {
-          backgroundColor: grey['10'],
-          color: getContrastingTextColor(grey['10'], [grey['30'], grey.white])
-        };
-      }
-
-      if (variant === 'outlined') {
-        cssObject = {
-          borderColor: grey['30'],
-          backgroundColor: grey['10'],
-          color: getContrastingTextColor(grey['30'], [grey['30'], grey.white])
-        };
-      }
-
-      if (variant === 'text') {
-        cssObject = {
-          color: getContrastingTextColor(grey['30'], [grey['30'], grey.white])
-        };
-      }
-
-      return cssObject;
-    }};
-  }
-
-  ${({ fullWidth }): CSSObject | null =>
-    fullWidth
-      ? {
-          width: '100%'
-        }
-      : null};
-`;

package/components/Button/Button.test.tsx

@@ -1,68 +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, vi } from 'vitest';
-
-import * as stories from './Button.stories';
-
-const { Text, FullWidth, IconOnly } = composeStories(stories);
-
-describe('Button', () => {
-  const setup = async () => {
-    render(<Text>TEST</Text>);
-    const button = screen.getByRole('button');
-    const user = await userEvent.setup();
-    return { user, button };
-  };
-
-  it('버튼명을 제대로 노출한다.', async () => {
-    const { button } = await setup();
-    expect(button).toBeInTheDocument();
-  });
-
-  // TODO: toHaveStyle: 인라인스타일로 지정해준 것만 확인가능
-  // it('버튼 hover, active 시의 효과가 보여진다.', async () => {
-  //   const { button, user } = await setup();
-  //   await user.hover(button);
-  //   await waitFor(() => expect(button).toHaveAttribute('backgroundColor', 'rgb(245, 180, 0)'));
-  //
-  //   await user.click(button);
-  //   await waitFor(() => expect(button).toHaveStyle({ backgroundColor: light.palette.yellow[80] }));
-  // });
-
-  it('버튼을 클릭하면 onClick 함수가 실행된다.', async () => {
-    const spy = vi.fn();
-    const user = await userEvent.setup();
-    render(<Text onClick={spy}>TEST</Text>);
-    user.click(screen.getByRole('button'));
-    await waitFor(() => expect(spy).toBeCalledTimes(1));
-  });
-
-  it('버튼이 disabled 일 때는 선택될 수 없다.', async () => {
-    const spy = vi.fn();
-    const user = await userEvent.setup();
-    render(
-      <Text disabled onClick={spy}>
-        TEST
-      </Text>
-    );
-    user.click(screen.getByRole('button'));
-    await waitFor(() => expect(spy).not.toBeCalled());
-  });
-
-  it('fullWidth 속성이 true 이면 100%의 너비값을 갖는다.', async () => {
-    render(<FullWidth>TEST</FullWidth>);
-    const button = screen.getByRole('button');
-    expect(button).toHaveStyle({ width: '100%' });
-  });
-
-  it('iconOnly 버튼은 오로지 icon만 노출한다.', async () => {
-    render(<IconOnly>TEST</IconOnly>);
-    const button = screen.getByRole('button');
-
-    expect(button).toBeInTheDocument();
-    expect(button).toHaveTextContent('');
-    expect(button.querySelector('svg')).toBeInTheDocument();
-  });
-});

package/components/Button/Button.tsx

@@ -1,82 +0,0 @@
-import type { ButtonHTMLAttributes, ReactNode } from 'react';
-import { forwardRef, isValidElement } from 'react';
-
-import type { IconProps } from '@components/Icon/Icon';
-import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
-import type { BrandColorKey } from '@typings/color';
-
-import type { GeneralComponentProps, Size, Variant } from '@typings/component';
-
-import getIconLabel from '@utils/getIconLabel/getIconLabel';
-
-import { StyledButton } from './Button.styles';
-
-export interface ButtonProps
-  extends GeneralComponentProps<ButtonHTMLAttributes<HTMLButtonElement>> {
-  variant?: Extract<Variant, 'filled' | 'outlined' | 'text'>;
-  color?: BrandColorKey;
-  size?: Size;
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  iconOnly?: boolean;
-  fullWidth?: boolean;
-  rounded?: boolean;
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
-  {
-    children,
-    variant = 'filled',
-    size = 'medium',
-    color = 'primary',
-    startAdornment,
-    endAdornment,
-    iconOnly,
-    fullWidth,
-    inlineCSS,
-    rounded = true,
-    disabled,
-    ...props
-  },
-  ref
-) {
-  const { isHoverPossible } = useCheckHoverPossible();
-
-  const getAriaLabel = () => {
-    if (!iconOnly) return undefined;
-
-    if (props['aria-label']) return props['aria-label'];
-
-    const childElement = startAdornment || endAdornment || children;
-    if (isValidElement<IconProps>(childElement)) {
-      return getIconLabel(childElement.props.name);
-    }
-
-    return undefined;
-  };
-
-  return (
-    <StyledButton
-      ref={ref}
-      variant={variant}
-      size={size}
-      color={color}
-      fullWidth={fullWidth}
-      rounded={rounded}
-      startAdornment={startAdornment}
-      endAdornment={endAdornment}
-      iconOnly={iconOnly}
-      isHoverPossible={isHoverPossible}
-      aria-disabled={disabled}
-      aria-label={getAriaLabel()}
-      {...props}
-      css={inlineCSS}
-    >
-      {startAdornment}
-      {!iconOnly && children}
-      {endAdornment}
-    </StyledButton>
-  );
-});
-
-export default Button;

package/components/Button/index.ts

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