@dotss/ui 0.0.6 → 0.0.8

package/components/Menu/Menu.styles.ts

@@ -1,67 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { MenuProps } from './Menu';
-
-export const Wrapper = styled.div<Pick<MenuProps, 'disableClickOutside'>>`
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 100003;
-
-    ${({ disableClickOutside }): CSSObject | null =>
-      !disableClickOutside
-        ? {
-            pointerEvents: 'none',
-            '& *': {
-              pointerEvents: 'auto'
-            }
-          }
-        : null}}
-
-`;
-
-export const StyledMenu = styled.div<Pick<MenuProps, 'open' | 'transitionDuration'>>`
-  position: fixed;
-  max-width: calc(100% - ${({ theme: { spacing } }) => spacing.layout(4)}px);
-  border-radius: 10px;
-  overflow: hidden;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey.white};
-  box-shadow: ${({ theme: { elevation } }) => elevation['4']};
-  transition:
-    transform ${({ transitionDuration }) => transitionDuration}ms,
-    opacity ${({ transitionDuration = 0 }) => transitionDuration / 2}ms;
-  transform: scale(${({ open }) => (open ? 1 : 0.97)});
-  opacity: ${({ open }) => (open ? 1 : 0)};
-  z-index: 100003;
-`;
-
-export const Inner = styled.ul<Pick<MenuProps, 'disablePadding' | 'maxHeight'>>`
-  display: flex;
-  flex-direction: column;
-  max-height: ${({ maxHeight }) => maxHeight}px;
-  overflow-y: auto;
-
-    ${({ theme: { spacing }, disablePadding }): CSSObject | null =>
-      !disablePadding
-        ? {
-            padding: `${spacing.content(1)}px 0`
-          }
-        : null}}
-`;
-
-export const Divider = styled.div`
-  width: 100%;
-  height: 1px;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey['20']};
-`;

package/components/Menu/Menu.tsx

@@ -1,261 +0,0 @@
-import type {
-  HTMLAttributes,
-  MouseEvent,
-  MouseEventHandler,
-  ReactElement,
-  ReactNode,
-  RefObject
-} from 'react';
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-import { createPortal } from 'react-dom';
-
-import type { GeneralComponentProps } from '@typings/component';
-
-import { Divider, Inner, StyledMenu, Wrapper } from './Menu.styles';
-
-import type MenuBlock from './MenuBlock';
-import type { MenuBlockProps } from './MenuBlock/MenuBlock';
-
-export interface MenuProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
-  anchorRef: RefObject<HTMLElement> | null;
-  open?: boolean;
-  onClose?: () => void;
-  spacing?: number;
-  transitionDuration?: number;
-  onChange?: (newValue?: string | number, e?: MouseEvent) => void;
-  value?: string | number;
-  showDivider?: boolean;
-  placement?:
-    | 'bottom-left'
-    | 'bottom-right'
-    | 'bottom-center'
-    | 'top-left'
-    | 'top-right'
-    | 'top-center';
-  disablePadding?: boolean;
-  disableClickOutside?: boolean;
-  children?: ReactElement<typeof MenuBlock> | ReactElement<typeof MenuBlock>[] | ReactNode;
-  width?: number;
-  fitToAnchorWidth?: boolean;
-  maxHeight?: number;
-}
-
-const EDGE_SPACING = 24;
-
-const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(
-  {
-    children,
-    anchorRef,
-    open,
-    onClose,
-    spacing = 4,
-    transitionDuration = 200,
-    onChange,
-    value,
-    showDivider,
-    placement = 'bottom-center',
-    disablePadding,
-    disableClickOutside = true,
-    width,
-    fitToAnchorWidth = true,
-    maxHeight = 476,
-    style,
-    inlineCSS,
-    ...props
-  },
-  ref
-) {
-  const [top, setTop] = useState<number | 'auto'>(0);
-  const [left, setLeft] = useState(0);
-  const [menuWidth, setMenuWidth] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
-  const [isReady, setIsReady] = useState(false);
-  const [isClosed, setIsClosed] = useState(true);
-
-  const openTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const closeTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const menuRef = useRef<HTMLUListElement>(null);
-
-  const handleClick =
-    (newValue: typeof value, childOnClick?: MouseEventHandler) =>
-    (e: MouseEvent<HTMLLIElement>) => {
-      e.stopPropagation();
-
-      if (typeof onClose === 'function') {
-        onClose();
-      }
-
-      if (typeof onChange === 'function') {
-        onChange(newValue, e);
-      }
-
-      if (typeof childOnClick === 'function') {
-        childOnClick(e);
-      }
-    };
-
-  useEffect(() => {
-    if (open) {
-      if (closeTimerRef.current) {
-        clearTimeout(closeTimerRef.current);
-      }
-
-      document.body.style.overflow = 'hidden';
-
-      setIsClosed(false);
-
-      openTimerRef.current = setTimeout(() => {
-        setIsOpen(true);
-        // Mount Delay
-      }, 100);
-    }
-  }, [open]);
-
-  useEffect(() => {
-    if (!open) {
-      if (openTimerRef.current) {
-        clearTimeout(openTimerRef.current);
-      }
-
-      setIsOpen(false);
-
-      document.body.removeAttribute('style');
-
-      closeTimerRef.current = setTimeout(() => {
-        setIsClosed(true);
-      }, transitionDuration);
-    }
-  }, [open, transitionDuration]);
-
-  useEffect(() => {
-    const handleMenuPosition = () => {
-      const { offsetWidth = 0, offsetHeight = 0 } = anchorRef?.current || {};
-      const boundingClientRect = anchorRef?.current?.getBoundingClientRect() || {
-        top: 0,
-        left: 0,
-        bottom: 0
-      };
-      const { offsetWidth: menuOffsetWidth = 0, offsetHeight: menuOffsetHeight = 0 } =
-        menuRef.current || {};
-
-      // TODO bottom-right, bottom-left, top-left, top-right 케이스 isOverflowing 계산 필요
-      // 24: 피그마 정책에 따른 여백 값
-      const [position, alignment] = placement.split('-');
-
-      setMenuWidth(width || offsetWidth);
-
-      const isTopOverflowing =
-        (boundingClientRect.top || 0) - menuOffsetHeight - spacing - EDGE_SPACING < EDGE_SPACING;
-      const isBottomOverflowing =
-        (boundingClientRect.bottom || 0) + menuOffsetHeight + spacing + EDGE_SPACING >
-        window.innerHeight;
-
-      switch (position) {
-        case 'top':
-          setTop(
-            isTopOverflowing ? EDGE_SPACING : boundingClientRect.top - menuOffsetHeight - spacing
-          );
-          break;
-        default:
-          setTop(isBottomOverflowing ? 'auto' : boundingClientRect.top + offsetHeight + spacing);
-          break;
-      }
-
-      switch (alignment) {
-        case 'left':
-          setLeft(boundingClientRect.left);
-          break;
-        case 'right':
-          setLeft(boundingClientRect.left - Math.abs(offsetWidth - menuOffsetWidth));
-          break;
-        default:
-          setLeft(boundingClientRect.left + offsetWidth / 2 - menuOffsetWidth / 2);
-          break;
-      }
-    };
-
-    handleMenuPosition();
-
-    window.addEventListener('scroll', handleMenuPosition);
-    window.addEventListener('resize', handleMenuPosition);
-
-    return () => {
-      window.removeEventListener('scroll', handleMenuPosition);
-      window.removeEventListener('resize', handleMenuPosition);
-    };
-  }, [anchorRef, spacing, placement, isOpen, children, width]);
-
-  useEffect(() => {
-    setIsReady(isOpen && !!top && !!left && !!menuWidth);
-  }, [isOpen, top, left, menuWidth]);
-
-  useEffect(() => {
-    return () => {
-      if (openTimerRef.current) {
-        clearTimeout(openTimerRef.current);
-      }
-      if (closeTimerRef.current) {
-        clearTimeout(closeTimerRef.current);
-      }
-    };
-  }, []);
-
-  if (isClosed) return null;
-
-  return createPortal(
-    <Wrapper onClick={onClose} disableClickOutside={disableClickOutside}>
-      <StyledMenu
-        ref={ref}
-        open={isReady}
-        transitionDuration={transitionDuration}
-        {...props}
-        css={inlineCSS}
-        style={{
-          ...style,
-          top,
-          left,
-          bottom: top === 'auto' ? 24 : undefined,
-          width: !fitToAnchorWidth ? undefined : menuWidth
-        }}
-      >
-        <Inner ref={menuRef} disablePadding={disablePadding} maxHeight={maxHeight}>
-          {Children.map(children, (element, index) => {
-            // TODO Children 유호성 검증 실패 시 에러를 throw 할지 고민 필요
-            if (!isValidElement<MenuBlockProps>(element)) {
-              return null;
-            }
-
-            return (
-              <>
-                {cloneElement(element, {
-                  ...element.props,
-                  selected: !!element?.props?.value && element?.props?.value === value,
-                  onClick: handleClick(element?.props?.value, element?.props?.onClick),
-                  style: {
-                    ...element?.props?.style,
-                    [!width ? 'minWidth' : 'width']: !fitToAnchorWidth ? menuWidth : undefined,
-                    maxWidth: !fitToAnchorWidth ? '100%' : undefined
-                  }
-                })}
-                {showDivider && Children.count(children) !== index + 1 && <Divider />}
-              </>
-            );
-          })}
-        </Inner>
-      </StyledMenu>
-    </Wrapper>,
-    document.body
-  );
-});
-
-export default Menu;

package/components/Menu/MenuBlock/MenuBlock.styles.ts

@@ -1,118 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { MenuBlockProps } from './MenuBlock';
-
-export const StyledMenuBlock = styled.li<
-  Pick<MenuBlockProps, 'selected' | 'disabled' | 'ellipsis'> & { isHoverPossible: boolean }
->`
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  padding: 10px ${({ theme: { spacing } }) => spacing.content(3)}px;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey.white};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-
-  & svg {
-    width: 20px;
-    height: 20px;
-    color: ${({
-      theme: {
-        palette: { brand, grey }
-      },
-      selected,
-      disabled
-    }) => {
-      if (selected) {
-        return brand.primary.main;
-      }
-
-      if (disabled) {
-        return grey['30'];
-      }
-
-      return 'inherit';
-    }};
-  }
-
-  ${({ ellipsis }) => {
-    if (ellipsis) {
-      return {
-        maxHeight: '40px'
-      };
-    }
-    return {};
-  }};
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    selected,
-    isHoverPossible
-  }): CSSObject => {
-    if (isHoverPossible) {
-      return {
-        '&:hover:not([disabled])': {
-          backgroundColor: selected ? brand.primary.bg : grey['10']
-        }
-      };
-    }
-    return {};
-  }}
-`;
-
-export const Content = styled.div<Pick<MenuBlockProps, 'selected' | 'disabled' | 'ellipsis'>>`
-  flex-grow: 1;
-
-  ${({ ellipsis }) => {
-    if (ellipsis) {
-      return {
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap'
-      };
-    }
-    return {};
-  }};
-
-  ${({
-    theme: {
-      palette: { brand, grey },
-      typography: { h5B, b4R }
-    },
-    selected,
-    disabled
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      fontSize: b4R.size,
-      fontWeight: b4R.weight,
-      letterSpacing: b4R.letterSpacing,
-      lineHeight: b4R.lineHeight
-    };
-
-    if (selected) {
-      cssObject = {
-        fontSize: h5B.size,
-        fontWeight: h5B.weight,
-        letterSpacing: h5B.letterSpacing,
-        lineHeight: h5B.lineHeight,
-        color: brand.primary.text
-      };
-    }
-
-    if (disabled) {
-      cssObject.color = grey['30'];
-    }
-
-    return cssObject;
-  }}}
-`;
-
-export const Adornment = styled.div`
-  white-space: nowrap;
-`;

package/components/Menu/MenuBlock/MenuBlock.tsx

@@ -1,72 +0,0 @@
-import type { HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import Icon from '@components/Icon';
-import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
-import type { GeneralComponentProps } from '@typings/component';
-
-import { Adornment, Content, StyledMenuBlock } from './MenuBlock.styles';
-
-export interface MenuBlockProps extends GeneralComponentProps<HTMLAttributes<HTMLLIElement>> {
-  startAdornment?: ReactNode;
-  endAdornment?: ReactNode;
-  selected?: boolean;
-  disabled?: boolean;
-  value?: string | number;
-  ellipsis?: boolean;
-}
-
-const MenuBlock = forwardRef<HTMLLIElement, MenuBlockProps>(function MenuBlock(
-  {
-    children,
-    startAdornment,
-    endAdornment,
-    inlineCSS,
-    selected,
-    disabled,
-    value,
-    onClick,
-    ellipsis = true,
-    ...props
-  },
-  ref
-) {
-  const { isHoverPossible } = useCheckHoverPossible();
-
-  const handleClick = (e: MouseEvent<HTMLLIElement>) => {
-    e.stopPropagation();
-
-    if (disabled) return;
-
-    if (typeof onClick === 'function') {
-      onClick(e);
-    }
-  };
-
-  return (
-    <StyledMenuBlock
-      ref={ref}
-      selected={selected}
-      disabled={disabled}
-      data-value={value}
-      isHoverPossible={isHoverPossible}
-      onClick={handleClick}
-      ellipsis={ellipsis}
-      {...props}
-      css={inlineCSS}
-    >
-      {startAdornment && <Adornment>{startAdornment}</Adornment>}
-      <Content selected={selected} disabled={disabled} ellipsis={ellipsis}>
-        {children}
-      </Content>
-      {!selected && endAdornment && <Adornment>{endAdornment}</Adornment>}
-      {selected && (
-        <Adornment>
-          <Icon name="CheckLine" color="primary" />
-        </Adornment>
-      )}
-    </StyledMenuBlock>
-  );
-});
-
-export default MenuBlock;

package/components/Menu/MenuBlock/index.ts

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

package/components/Menu/index.ts

@@ -1,5 +0,0 @@
-import Menu from './Menu';
-
-export { default as MenuBlock } from './MenuBlock';
-
-export default Menu;

package/components/NumberKeypad/NumberKeypad.stories.tsx

@@ -1,113 +0,0 @@
-import { useRef, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Box from '@components/Box';
-import Button from '@components/Button';
-import Icon from '@components/Icon';
-import Menu from '@components/Menu';
-import useTheme from '@core/useTheme';
-
-import NumberKeypad from './NumberKeypad';
-import NumberKeypadBlock from './NumberKeypadBlock';
-
-const meta = {
-  title: 'Component/NumberKeypad',
-  component: NumberKeypad,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof NumberKeypad>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    return (
-      <NumberKeypad maxWidth={props?.maxWidth} size={props?.size} disabled={props?.disabled}>
-        <NumberKeypadBlock value={1}>1</NumberKeypadBlock>
-        <NumberKeypadBlock value={2}>2</NumberKeypadBlock>
-        <NumberKeypadBlock value={3}>3</NumberKeypadBlock>
-        <NumberKeypadBlock value={4}>4</NumberKeypadBlock>
-        <NumberKeypadBlock value={5}>5</NumberKeypadBlock>
-        <NumberKeypadBlock value={6}>6</NumberKeypadBlock>
-        <NumberKeypadBlock value={7}>7</NumberKeypadBlock>
-        <NumberKeypadBlock value={8}>8</NumberKeypadBlock>
-        <NumberKeypadBlock value={9}>9</NumberKeypadBlock>
-        <NumberKeypadBlock value="reset">
-          <Icon name="ResetLine" />
-        </NumberKeypadBlock>
-        <NumberKeypadBlock value={0}>0</NumberKeypadBlock>
-        <NumberKeypadBlock value="complete">완료</NumberKeypadBlock>
-      </NumberKeypad>
-    );
-  },
-  args: {
-    maxWidth: 0,
-    size: 'small',
-    disabled: false
-  }
-};
-
-export const Usage: Story = {
-  render: (props) => {
-    const {
-      palette: { brand }
-    } = useTheme();
-
-    const [isOpen, setIsOpen] = useState(false);
-
-    const ref = useRef<HTMLButtonElement>(null);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    return (
-      <>
-        <Button ref={ref} onClick={handleOpen}>
-          Open NumberKeypad
-        </Button>
-        <Menu
-          anchorRef={ref}
-          open={isOpen}
-          onClose={handleOpen}
-          spacing={20}
-          disablePadding
-          inlineCSS={{
-            borderRadius: 20
-          }}
-        >
-          <Box
-            p={5}
-            inlineCSS={{
-              backgroundColor: brand.primary.bg
-            }}
-          >
-            <NumberKeypad maxWidth={props?.maxWidth} size={props?.size} disabled={props?.disabled}>
-              <NumberKeypadBlock value={1}>1</NumberKeypadBlock>
-              <NumberKeypadBlock value={2}>2</NumberKeypadBlock>
-              <NumberKeypadBlock value={3}>3</NumberKeypadBlock>
-              <NumberKeypadBlock value={4}>4</NumberKeypadBlock>
-              <NumberKeypadBlock value={5}>5</NumberKeypadBlock>
-              <NumberKeypadBlock value={6}>6</NumberKeypadBlock>
-              <NumberKeypadBlock value={7}>7</NumberKeypadBlock>
-              <NumberKeypadBlock value={8}>8</NumberKeypadBlock>
-              <NumberKeypadBlock value={9}>9</NumberKeypadBlock>
-              <NumberKeypadBlock value="reset">
-                <Icon name="ResetLine" />
-              </NumberKeypadBlock>
-              <NumberKeypadBlock value={0}>0</NumberKeypadBlock>
-              <NumberKeypadBlock value="complete">완료</NumberKeypadBlock>
-            </NumberKeypad>
-          </Box>
-        </Menu>
-      </>
-    );
-  },
-  args: {
-    maxWidth: 0,
-    size: 'small',
-    disabled: false
-  }
-};

package/components/NumberKeypad/NumberKeypad.styles.ts

@@ -1,14 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { NumberKeypadProps } from './NumberKeypad';
-
-export const StyledNumberKeypad = styled.div<Pick<NumberKeypadProps, 'maxWidth'>>`
-  display: flex;
-  align-content: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: ${({ theme: { spacing } }) => spacing.content(3)}px;
-
-  ${({ maxWidth }): CSSObject => ({ maxWidth })}
-`;