@dotss/ui 0.0.7 → 0.0.8

package/components/BottomSheet/BottomSheet.tsx

@@ -1,186 +0,0 @@
-import type { HTMLAttributes, MouseEvent, TouchEvent } from 'react';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-
-import Backdrop from '@components/Backdrop';
-import type { BackdropProps } from '@components/Backdrop/Backdrop';
-import Flexbox from '@components/Flexbox';
-import type { GeneralComponentProps } from '@typings/component';
-
-import { DragBar, DragHandler, StyledBottomSheet, Wrapper } from './BottomSheet.styles';
-
-export interface BottomSheetProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  open?: boolean;
-  onClose?: () => void;
-  transitionDuration?: number;
-  enableDragCloseHandler?: boolean;
-  backdropProps?: BackdropProps;
-  systemNavigationBarColor?: string;
-  hideSystemNavigationBar?: boolean;
-}
-
-const BottomSheet = forwardRef<HTMLDivElement, BottomSheetProps>(function BottomSheet(
-  {
-    children,
-    open,
-    onClose,
-    transitionDuration = 200,
-    inlineCSS,
-    enableDragCloseHandler,
-    backdropProps,
-    systemNavigationBarColor = '#FFFFFF',
-    hideSystemNavigationBar = false,
-    ...props
-  },
-  ref
-) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isDragging, setIsDragging] = useState(false);
-
-  const openTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const startClientYRef = useRef(0);
-  const currentClientYRef = useRef(0);
-
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => e.stopPropagation();
-
-  const handleClickWrapper = (e: MouseEvent<HTMLDivElement>) => {
-    setIsDragging(false);
-
-    if (isDragging) {
-      e.stopPropagation();
-    }
-  };
-
-  const handleDragStart = (clientY: number) => () => {
-    setIsDragging(true);
-
-    startClientYRef.current = clientY;
-  };
-
-  const handleDragMove =
-    (clientY: number, e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => () => {
-      if (!isDragging) return;
-
-      currentClientYRef.current = clientY - startClientYRef.current;
-
-      if (currentClientYRef.current < 0) {
-        return;
-      }
-
-      e.currentTarget.style.transitionDuration = '0ms';
-      e.currentTarget.style.transform = `translate3d(0, ${currentClientYRef.current}px, 0)`;
-    };
-
-  const handleDragEnd = (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => {
-    if (currentClientYRef.current >= 20 && typeof onClose === 'function') {
-      e.currentTarget.style.transitionDuration = `${transitionDuration}ms`;
-      e.currentTarget.style.transform = 'translate3d(0, 100%, 0)';
-      onClose();
-    } else {
-      e.currentTarget.removeAttribute('style');
-    }
-
-    startClientYRef.current = 0;
-    currentClientYRef.current = 0;
-    setIsDragging(false);
-  };
-
-  const handleDragOver = (e: MouseEvent<HTMLDivElement> | TouchEvent<HTMLDivElement>) => {
-    if (isDragging) {
-      e.currentTarget.removeAttribute('style');
-    }
-  };
-
-  const handleMouseDown = (e: MouseEvent<HTMLDivElement>) => handleDragStart(e.clientY)();
-
-  const handleMouseMove = (e: MouseEvent<HTMLDivElement>) => handleDragMove(e.clientY, e)();
-
-  const handleTouchStart = (e: TouchEvent<HTMLDivElement>) =>
-    handleDragStart(e.touches[0].clientY)();
-
-  const handleTouchMove = (e: TouchEvent<HTMLDivElement>) =>
-    handleDragMove(e.touches[0].clientY, e)();
-
-  useEffect(() => {
-    if (open) {
-      if (openTimerRef.current) {
-        clearTimeout(openTimerRef.current);
-      }
-
-      openTimerRef.current = setTimeout(() => {
-        setIsOpen(true);
-        // Mount Delay
-      }, 100);
-    } else {
-      setIsOpen(false);
-    }
-  }, [open]);
-
-  useEffect(() => {
-    const handleKeydown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        if (open && onClose) {
-          onClose();
-        }
-      }
-    };
-    document.addEventListener('keydown', handleKeydown);
-    return () => document.removeEventListener('keydown', handleKeydown);
-  }, [open, onClose]);
-
-  useEffect(() => {
-    return () => {
-      if (openTimerRef.current) {
-        clearTimeout(openTimerRef.current);
-      }
-    };
-  }, []);
-
-  return (
-    <Backdrop
-      open={open}
-      onClose={onClose}
-      transitionDuration={transitionDuration}
-      fullScreen
-      {...backdropProps}
-    >
-      <Wrapper isDragging={isDragging} onClick={handleClickWrapper}>
-        <StyledBottomSheet
-          ref={ref}
-          open={isOpen}
-          transitionDuration={transitionDuration}
-          onClick={handleClick}
-          onMouseMove={handleMouseMove}
-          onMouseUp={handleDragEnd}
-          // TODO 추후 개선
-          onMouseOut={handleDragOver}
-          onTouchMove={handleTouchMove}
-          onTouchEnd={handleDragEnd}
-          onTouchCancel={handleDragOver}
-          {...props}
-          css={inlineCSS}
-        >
-          {enableDragCloseHandler && (
-            <DragBar
-              isDragging={isDragging}
-              onMouseDown={handleMouseDown}
-              onTouchStart={handleTouchStart}
-            >
-              <DragHandler isDragging={isDragging} />
-            </DragBar>
-          )}
-          {children}
-          {!hideSystemNavigationBar && (
-            <Flexbox
-              inlineCSS={{
-                minHeight: 'var(--system-navigation-bar-height, 0px)',
-                backgroundColor: systemNavigationBarColor
-              }}
-            />
-          )}
-        </StyledBottomSheet>
-      </Wrapper>
-    </Backdrop>
-  );
-});
-
-export default BottomSheet;

package/components/BottomSheet/BottomSheetAction/BottomSheetAction.styles.ts

@@ -1,21 +0,0 @@
-import styled from '@emotion/styled';
-
-import type { BottomSheetActionProps } from './BottomSheetAction';
-
-export const StyledBottomSheetAction = styled.div<
-  Pick<BottomSheetActionProps, 'enableAdjustSpacing'>
->`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-wrap: wrap;
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  width: 100%;
-  margin-top: -${({ theme: { spacing } }) => spacing.content(1)}px;
-  padding: ${({ theme: { spacing } }) => `0 ${spacing.content(4)}px ${spacing.content(3)}px`};
-
-  & > button {
-    width: calc(100% / 3);
-    flex-grow: 1;
-  }
-`;

package/components/BottomSheet/BottomSheetAction/BottomSheetAction.tsx

@@ -1,28 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import type { GeneralComponentProps } from '@typings/component';
-
-import { StyledBottomSheetAction } from './BottomSheetAction.styles';
-
-export interface BottomSheetActionProps
-  extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  enableAdjustSpacing?: boolean;
-}
-
-const BottomSheetAction = forwardRef<HTMLDivElement, BottomSheetActionProps>(
-  function BottomSheetAction({ children, enableAdjustSpacing, inlineCSS, ...props }, ref) {
-    return (
-      <StyledBottomSheetAction
-        ref={ref}
-        enableAdjustSpacing={enableAdjustSpacing}
-        {...props}
-        css={inlineCSS}
-      >
-        {children}
-      </StyledBottomSheetAction>
-    );
-  }
-);
-
-export default BottomSheetAction;

package/components/BottomSheet/BottomSheetAction/index.ts

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

package/components/BottomSheet/BottomSheetContent/BottomSheetContent.styles.ts

@@ -1,17 +0,0 @@
-import styled from '@emotion/styled';
-
-import type { BottomSheetContentProps } from './BottomSheetContent';
-
-export const StyledBottomSheetContent = styled.div<
-  Pick<BottomSheetContentProps, 'enableAdjustSpacing'>
->`
-  display: flex;
-  flex-direction: column;
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  padding: ${({ theme: { spacing }, enableAdjustSpacing }) =>
-    enableAdjustSpacing
-      ? `0 ${spacing.content(4)}px ${spacing.content(4)}px`
-      : `${spacing.content(4)}px`};
-  overflow-y: auto;
-  flex: 1;
-`;

package/components/BottomSheet/BottomSheetContent/BottomSheetContent.tsx

@@ -1,28 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import type { GeneralComponentProps } from '@typings/component';
-
-import { StyledBottomSheetContent } from './BottomSheetContent.styles';
-
-export interface BottomSheetContentProps
-  extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  enableAdjustSpacing?: boolean;
-}
-
-const BottomSheetContent = forwardRef<HTMLDivElement, BottomSheetContentProps>(
-  function BottomSheetContent({ children, enableAdjustSpacing, inlineCSS, ...props }, ref) {
-    return (
-      <StyledBottomSheetContent
-        ref={ref}
-        enableAdjustSpacing={enableAdjustSpacing}
-        {...props}
-        css={inlineCSS}
-      >
-        {children}
-      </StyledBottomSheetContent>
-    );
-  }
-);
-
-export default BottomSheetContent;

package/components/BottomSheet/BottomSheetContent/index.ts

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

package/components/BottomSheet/BottomSheetText/BottomSheetText.styles.ts

@@ -1,33 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { BottomSheetTextProps } from './BottomSheetText';
-
-export const StyledBottomSheetText = styled.div<Pick<BottomSheetTextProps, 'type' | 'textAlign'>>`
-  text-align: ${({ textAlign }) => textAlign};
-
-  ${({
-    theme: {
-      palette: { grey },
-      typography: { b2R, b4R }
-    },
-    type
-  }): CSSObject => {
-    if (type === 'sub') {
-      return {
-        fontSize: b4R.size,
-        fontWeight: b4R.weight,
-        lineHeight: b4R.lineHeight,
-        letterSpacing: b4R.letterSpacing,
-        color: grey['70']
-      };
-    }
-
-    return {
-      fontSize: b2R.size,
-      fontWeight: b2R.weight,
-      lineHeight: b2R.lineHeight,
-      letterSpacing: b2R.letterSpacing
-    };
-  }}
-`;

package/components/BottomSheet/BottomSheetText/BottomSheetText.tsx

@@ -1,27 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import type { Property } from 'csstype';
-
-import type { GeneralComponentProps } from '@typings/component';
-
-import { StyledBottomSheetText } from './BottomSheetText.styles';
-
-export interface BottomSheetTextProps
-  extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  type?: 'main' | 'sub';
-  textAlign?: Property.TextAlign;
-}
-
-const BottomSheetText = forwardRef<HTMLDivElement, BottomSheetTextProps>(function BottomSheetText(
-  { children, type = 'main', textAlign = 'center', inlineCSS, ...props },
-  ref
-) {
-  return (
-    <StyledBottomSheetText ref={ref} type={type} textAlign={textAlign} {...props} css={inlineCSS}>
-      {children}
-    </StyledBottomSheetText>
-  );
-});
-
-export default BottomSheetText;

package/components/BottomSheet/BottomSheetText/index.ts

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

package/components/BottomSheet/BottomSheetTitle/BottomSheetTitle.styles.ts

@@ -1,53 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { BottomSheetTitleProps } from './BottomSheetTitle';
-
-export const StyledBottomSheetTitle = styled.div<Pick<BottomSheetTitleProps, 'hideLine'>>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${({ theme: { spacing } }) => spacing.content(3)}px
-    ${({ theme: { spacing } }) => spacing.content(4)}px;
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  min-height: 48px;
-  max-height: 48px;
-  border-bottom: 1px solid
-    ${({
-      theme: {
-        palette: { grey }
-      },
-      hideLine
-    }) => (hideLine ? 'transparent' : grey['10'])};
-`;
-
-export const Title = styled.div`
-  flex-grow: 1;
-  text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  ${({
-    theme: {
-      typography: { h4B }
-    }
-  }): CSSObject => ({
-    fontSize: h4B.size,
-    fontWeight: h4B.weight,
-    lineHeight: h4B.lineHeight,
-    letterSpacing: h4B.letterSpacing
-  })};
-`;
-
-export const CloseButton = styled.button`
-  position: absolute;
-  top: 50%;
-  right: 16px;
-  transform: translateY(-50%);
-`;
-
-export const EmptySpace = styled.div`
-  min-width: 24px;
-`;

package/components/BottomSheet/BottomSheetTitle/BottomSheetTitle.tsx

@@ -1,36 +0,0 @@
-import type { HTMLAttributes } from 'react';
-import { forwardRef } from 'react';
-
-import Icon from '@components/Icon';
-import type { GeneralComponentProps } from '@typings/component';
-
-import { CloseButton, EmptySpace, StyledBottomSheetTitle, Title } from './BottomSheetTitle.styles';
-
-export interface BottomSheetTitleProps
-  extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  onClose?: () => void;
-  hideCloseButton?: boolean;
-  hideLine?: boolean;
-}
-
-const BottomSheetTitle = forwardRef<HTMLDivElement, BottomSheetTitleProps>(
-  function BottomSheetTitle(
-    { children, onClose, hideCloseButton, hideLine, inlineCSS, ...props },
-    ref
-  ) {
-    return (
-      <StyledBottomSheetTitle ref={ref} hideLine={hideLine} {...props} css={inlineCSS}>
-        <EmptySpace />
-        <Title>{children}</Title>
-        <EmptySpace />
-        {!hideCloseButton && (
-          <CloseButton className="closeButton" onClick={onClose} aria-label="창 닫기">
-            <Icon name="CloseLine" />
-          </CloseButton>
-        )}
-      </StyledBottomSheetTitle>
-    );
-  }
-);
-
-export default BottomSheetTitle;

package/components/BottomSheet/BottomSheetTitle/index.ts

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

package/components/BottomSheet/index.ts

@@ -1,8 +0,0 @@
-import BottomSheet from './BottomSheet';
-
-export { default as BottomSheetTitle } from './BottomSheetTitle';
-export { default as BottomSheetContent } from './BottomSheetContent';
-export { default as BottomSheetAction } from './BottomSheetAction';
-export { default as BottomSheetText } from './BottomSheetText';
-
-export default BottomSheet;

package/components/Box/Box.stories.tsx

@@ -1,39 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Box from './Box';
-
-const meta = {
-  title: 'Component/Box',
-  component: Box,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    spacingType: {
-      options: ['content', 'layout'],
-      control: {
-        type: 'radio'
-      }
-    },
-    visuallyHidden: {
-      control: {
-        type: 'boolean'
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Box>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Spacing: Story = {
-  args: {
-    children: 'Box',
-    spacingType: 'content',
-    p: 10,
-    inlineCSS: {
-      border: '1px solid'
-    }
-  }
-};

package/components/Box/Box.styles.ts

@@ -1,59 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { BoxProps } from './Box';
-
-// TODO Spacing 더 나은 구현 방법 고민
-export const StyledBox = styled.div<
-  Pick<
-    BoxProps,
-    | 'spacingType'
-    | 'm'
-    | 'mt'
-    | 'mb'
-    | 'ml'
-    | 'mr'
-    | 'p'
-    | 'pt'
-    | 'pb'
-    | 'pl'
-    | 'pr'
-    | 'visuallyHidden'
-  >
->`
-  ${({ theme: { spacing }, spacingType = 'content', m, mt, mb, ml, mr }): CSSObject | null =>
-    !m && (mt || mb || ml || mr)
-      ? {
-          marginTop: mt ? spacing[spacingType](mt) : undefined,
-          marginBottom: mb ? spacing[spacingType](mb) : undefined,
-          marginLeft: ml ? spacing[spacingType](ml) : undefined,
-          marginRight: mr ? spacing[spacingType](mr) : undefined
-        }
-      : null};
-  ${({ theme: { spacing }, spacingType = 'content', m }): CSSObject | null =>
-    m ? { margin: spacing[spacingType](m) } : null};
-  ${({ theme: { spacing }, spacingType = 'content', p, pt, pb, pl, pr }): CSSObject | null =>
-    !p && (pt || pb || pl || pr)
-      ? {
-          paddingTop: pt ? spacing[spacingType](pt) : undefined,
-          paddingBottom: pb ? spacing[spacingType](pb) : undefined,
-          paddingLeft: pl ? spacing[spacingType](pl) : undefined,
-          paddingRight: pr ? spacing[spacingType](pr) : undefined
-        }
-      : null};
-  ${({ theme: { spacing }, spacingType = 'content', p }): CSSObject | null =>
-    p ? { padding: spacing[spacingType](p) } : null};
-
-  ${({ visuallyHidden }): CSSObject | null =>
-    visuallyHidden
-      ? {
-          clip: 'rect(0 0 0 0)',
-          clipPath: 'inset(50%)',
-          height: '1px',
-          overflow: 'hidden',
-          position: 'absolute',
-          whiteSpace: 'nowrap',
-          width: '1px'
-        }
-      : null}
-`;

package/components/Box/Box.tsx

@@ -1,35 +0,0 @@
-import type { ElementType, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import type { PolymorphicComponentProps, Spacing } from '@typings/component';
-
-import { StyledBox } from './Box.styles';
-
-export type BoxProps<T extends ElementType = 'div'> = Spacing &
-  PolymorphicComponentProps<T> & {
-    visuallyHidden?: boolean;
-  };
-
-type BoxComponent<DT extends ElementType> = <T extends ElementType = DT>(
-  props: BoxProps<T>
-) => ReactNode;
-
-const Box: BoxComponent<'div'> = forwardRef(function Box(
-  { children, tag, inlineCSS, spacingType = 'content', visuallyHidden = false, ...props },
-  ref
-) {
-  return (
-    <StyledBox
-      ref={ref}
-      as={tag}
-      spacingType={spacingType}
-      visuallyHidden={visuallyHidden}
-      {...props}
-      css={inlineCSS}
-    >
-      {children}
-    </StyledBox>
-  );
-});
-
-export default Box;

package/components/Box/index.ts

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