@dotss/ui 0.0.4

package/components/Dialog/Dialog.tsx

@@ -0,0 +1,154 @@
+import type { HTMLAttributes, MouseEvent } 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 FocusBoundary from '@components/FocusBoundary';
+import type { GeneralComponentProps } from '@typings/component';
+
+import { StyledDialog } from './Dialog.styles';
+
+export interface DialogProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+  open?: boolean;
+  onClose?: () => void;
+  transitionDuration?: number;
+  fullWidth?: boolean;
+  fullScreen?: boolean;
+  maxWidth?: number | 'auto';
+  maxHeight?: number | 'auto';
+  backdropProps?: BackdropProps;
+  disableFocusBoundary?: boolean;
+  statusBarColor?: string;
+  systemNavigationBarColor?: string;
+  hideStatusBar?: boolean;
+  hideSystemNavigationBar?: boolean;
+}
+
+// TODO 고도화
+// 1. 동시성을 고려한 렌더링 구현
+const Dialog = forwardRef<HTMLDivElement, DialogProps>(function Dialog(
+  {
+    children,
+    open,
+    onClose,
+    transitionDuration = 200,
+    fullWidth = true,
+    fullScreen = false,
+    maxWidth = 320,
+    maxHeight = 438,
+    inlineCSS,
+    backdropProps,
+    statusBarColor = 'transparent',
+    systemNavigationBarColor = '#FFFFFF',
+    disableFocusBoundary = false,
+    hideStatusBar = false,
+    hideSystemNavigationBar = false,
+    ...props
+  },
+  ref
+) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const backdropRef = useRef<HTMLDivElement>(null);
+  const openTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const handleClick = (e: MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  const dialogTitleId =
+    backdropRef.current?.querySelector('[id^="dialogTitle"]')?.getAttribute('id') || '';
+  const dialogTextId =
+    backdropRef.current?.querySelector('[id^="dialogText"]')?.getAttribute('id') || '';
+
+  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
+      ref={backdropRef}
+      open={open}
+      onClose={onClose}
+      transitionDuration={transitionDuration}
+      centered={!fullScreen}
+      fullScreen={fullScreen}
+      {...backdropProps}
+    >
+      <StyledDialog
+        ref={ref}
+        role="dialog"
+        aria-labelledby={dialogTitleId}
+        aria-describedby={dialogTextId}
+        open={isOpen}
+        transitionDuration={transitionDuration}
+        fullWidth={fullWidth}
+        fullScreen={fullScreen}
+        maxWidth={maxWidth}
+        maxHeight={maxHeight}
+        onClick={handleClick}
+        {...props}
+        css={inlineCSS}
+      >
+        <FocusBoundary
+          active={open}
+          disabled={disableFocusBoundary}
+          inlineCSS={{
+            flex: 1,
+            overflowY: 'auto'
+          }}
+        >
+          {fullScreen && !hideStatusBar && (
+            <Flexbox
+              inlineCSS={{
+                minHeight: 'var(--status-bar-height, 0px)',
+                backgroundColor: statusBarColor
+              }}
+            />
+          )}
+          {children}
+          {fullScreen && !hideSystemNavigationBar && (
+            <Flexbox
+              inlineCSS={{
+                minHeight: 'var(--system-navigation-bar-height, 0px)',
+                backgroundColor: systemNavigationBarColor
+              }}
+            />
+          )}
+        </FocusBoundary>
+      </StyledDialog>
+    </Backdrop>
+  );
+});
+
+export default Dialog;

package/components/Dialog/DialogAction/DialogAction.styles.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const StyledDialogAction = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+  width: 100%;
+  padding: ${({ theme: { spacing } }) => `0 ${spacing.content(4)}px ${spacing.content(3)}px`};
+
+  & > button {
+    flex: 1;
+  }
+`;

package/components/Dialog/DialogAction/DialogAction.tsx

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { GeneralComponentProps } from '@typings/component';
+
+import { StyledDialogAction } from './DialogAction.styles';
+
+const DialogAction = forwardRef<
+  HTMLDivElement,
+  GeneralComponentProps<HTMLAttributes<HTMLDivElement>>
+>(function DialogAction({ children, inlineCSS, ...props }, ref) {
+  return (
+    <StyledDialogAction ref={ref} {...props} css={inlineCSS}>
+      {children}
+    </StyledDialogAction>
+  );
+});
+
+export default DialogAction;

package/components/Dialog/DialogAction/index.ts

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

package/components/Dialog/DialogContent/DialogContent.styles.ts

@@ -0,0 +1,10 @@
+import styled from '@emotion/styled';
+
+export const StyledDialogContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+  padding: ${({ theme: { spacing } }) => `${spacing.content(5)}px ${spacing.content(4)}px`};
+  overflow-y: auto;
+  flex: 1;
+`;

package/components/Dialog/DialogContent/DialogContent.tsx

@@ -0,0 +1,19 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef } from 'react';
+
+import type { GeneralComponentProps } from '@typings/component';
+
+import { StyledDialogContent } from './DialogContent.styles';
+
+const DialogContent = forwardRef<
+  HTMLDivElement,
+  GeneralComponentProps<HTMLAttributes<HTMLDivElement>>
+>(function DialogContent({ children, inlineCSS, ...props }, ref) {
+  return (
+    <StyledDialogContent ref={ref} {...props} css={inlineCSS}>
+      {children}
+    </StyledDialogContent>
+  );
+});
+
+export default DialogContent;

package/components/Dialog/DialogContent/index.ts

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

package/components/Dialog/DialogText/DialogText.styles.ts

@@ -0,0 +1,33 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { DialogTextProps } from './DialogText';
+
+export const StyledDialogText = styled.div<Pick<DialogTextProps, '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/Dialog/DialogText/DialogText.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from 'react';
+import { forwardRef, useId } from 'react';
+
+import type { Property } from 'csstype';
+
+import { StyledDialogText } from '@components/Dialog/DialogText/DialogText.styles';
+import type { GeneralComponentProps } from '@typings/component';
+
+export interface DialogTextProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
+  type?: 'main' | 'sub';
+  textAlign?: Property.TextAlign;
+}
+
+const DialogText = forwardRef<HTMLDivElement, DialogTextProps>(function DialogText(
+  { children, type = 'main', textAlign = 'center', inlineCSS, ...props },
+  ref
+) {
+  const id = useId();
+  return (
+    <StyledDialogText
+      ref={ref}
+      type={type}
+      textAlign={textAlign}
+      {...props}
+      id={`dialogText${id}`}
+      css={inlineCSS}
+    >
+      {children}
+    </StyledDialogText>
+  );
+});
+
+export default DialogText;

package/components/Dialog/DialogText/index.ts

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

package/components/Dialog/DialogTitle/DialogTitle.styles.ts

@@ -0,0 +1,65 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { DialogTitleProps } from './DialogTitle';
+
+export const StyledDialogTitle = styled.div<Pick<DialogTitleProps, 'fullScreen'>>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
+
+  ${({
+    theme: {
+      spacing,
+      palette: { grey }
+    },
+    fullScreen
+  }): CSSObject => {
+    let cssObject: CSSObject = {
+      padding: `${spacing.content(3)}px ${spacing.content(4)}px`,
+      borderBottom: `1px solid ${grey['10']}`,
+      maxHeight: 48
+    };
+
+    if (fullScreen) {
+      cssObject = {
+        padding: spacing.content(4),
+        maxHeight: 56
+      };
+    }
+
+    return cssObject;
+  }};
+`;
+
+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: ${({ theme: { spacing } }) => spacing.content(4)}px;
+  transform: translateY(-50%);
+`;
+
+export const EmptySpace = styled.div`
+  min-width: 24px;
+`;

package/components/Dialog/DialogTitle/DialogTitle.tsx

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

package/components/Dialog/DialogTitle/index.ts

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

package/components/Dialog/index.ts

@@ -0,0 +1,8 @@
+import Dialog from './Dialog';
+
+export { default as DialogTitle } from './DialogTitle';
+export { default as DialogContent } from './DialogContent';
+export { default as DialogAction } from './DialogAction';
+export { default as DialogText } from './DialogText';
+
+export default Dialog;

package/components/Flexbox/Flexbox.stories.tsx

@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Box from '@components/Box';
+
+import Flexbox from './Flexbox';
+
+const meta = {
+  title: 'Component/Flexbox',
+  component: Flexbox,
+  parameters: {
+    layout: 'centered'
+  },
+  argTypes: {
+    children: {
+      control: {
+        disable: true
+      }
+    },
+    spacingType: {
+      options: ['content', 'layout'],
+      control: {
+        type: 'radio'
+      }
+    },
+    flexDirection: {
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+      control: {
+        type: 'radio'
+      }
+    },
+    flexWrap: {
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+      control: {
+        type: 'radio'
+      }
+    },
+    alignItems: {
+      options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
+      control: {
+        type: 'radio'
+      }
+    },
+    justifyContent: {
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+        'start',
+        'end',
+        'left',
+        'right',
+        'safe',
+        'unsafe'
+      ],
+      control: {
+        type: 'radio'
+      }
+    },
+    visuallyHidden: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  },
+  tags: ['autodocs']
+} satisfies Meta<typeof Flexbox>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Spacing: Story = {
+  args: {
+    children: 'Flexbox',
+    spacingType: 'content',
+    p: 10,
+    inlineCSS: {
+      border: '1px solid'
+    }
+  }
+};
+
+export const Gap: Story = {
+  args: {
+    children: (
+      <>
+        <Box
+          p={2}
+          inlineCSS={{
+            border: '1px solid'
+          }}
+        >
+          ITEM 1
+        </Box>
+        <Box
+          p={2}
+          inlineCSS={{
+            border: '1px solid'
+          }}
+        >
+          ITEM 2
+        </Box>
+        <Box
+          p={2}
+          inlineCSS={{
+            border: '1px solid'
+          }}
+        >
+          ITEM 3
+        </Box>
+      </>
+    ),
+    gap: 2
+  }
+};

package/components/Flexbox/Flexbox.styles.ts

@@ -0,0 +1,80 @@
+import type { CSSObject } from '@emotion/styled';
+import styled from '@emotion/styled';
+
+import type { FlexboxProps } from './Flexbox';
+
+export const StyledFlexbox = styled.div<
+  Pick<
+    FlexboxProps,
+    | 'spacingType'
+    | 'alignItems'
+    | 'justifyContent'
+    | 'gap'
+    | 'flexDirection'
+    | 'flexWrap'
+    | 'flex'
+    | 'flexGrow'
+    | 'flexShrink'
+    | 'flexBasis'
+    | 'flexFlow'
+    | 'm'
+    | 'mt'
+    | 'mb'
+    | 'ml'
+    | 'mr'
+    | 'p'
+    | 'pt'
+    | 'pb'
+    | 'pl'
+    | 'pr'
+    | 'visuallyHidden'
+  >
+>`
+  display: flex;
+  ${({ alignItems }): CSSObject | null => (alignItems ? { alignItems } : null)};
+  ${({ justifyContent }): CSSObject | null => (justifyContent ? { justifyContent } : null)};
+  ${({ theme: { spacing }, spacingType = 'content', gap }): CSSObject | null =>
+    gap ? { gap: spacing[spacingType](gap) } : null};
+  ${({ flexDirection }): CSSObject | null => (flexDirection ? { flexDirection } : null)};
+  ${({ flexWrap }): CSSObject | null => (flexWrap ? { flexWrap } : null)};
+  ${({ flex }): CSSObject | null => (flex ? { flex } : null)};
+  ${({ flexGrow }): CSSObject | null => (flexGrow ? { flexGrow } : null)};
+  ${({ flexShrink }): CSSObject | null => (flexShrink ? { flexShrink } : null)};
+  ${({ flexBasis }): CSSObject | null => (flexBasis ? { flexBasis } : null)};
+  ${({ flexFlow }): CSSObject | null => (flexFlow ? { flexFlow } : null)}
+  ${({ 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/Flexbox/Flexbox.tsx

@@ -0,0 +1,47 @@
+import type { ElementType, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import type { Property } from 'csstype';
+
+import type { PolymorphicComponentProps, Spacing } from '@typings/component';
+
+import { StyledFlexbox } from './Flexbox.styles';
+
+export type FlexboxProps<T extends ElementType = 'div'> = Spacing &
+  PolymorphicComponentProps<T> & {
+    alignItems?: Property.AlignItems;
+    justifyContent?: Property.JustifyContent;
+    gap?: number;
+    flexDirection?: Property.FlexDirection;
+    flexWrap?: Property.FlexWrap;
+    flex?: Property.Flex;
+    flexGrow?: Property.FlexGrow;
+    flexShrink?: Property.FlexShrink;
+    flexBasis?: Property.FlexBasis;
+    flexFlow?: Property.FlexFlow;
+    visuallyHidden?: boolean;
+  };
+
+type FlexboxComponent<DT extends ElementType> = <T extends ElementType = DT>(
+  props: FlexboxProps<T>
+) => ReactNode;
+
+const Flexbox: FlexboxComponent<'div'> = forwardRef(function Flexbox(
+  { children, tag, spacingType = 'content', inlineCSS, visuallyHidden = false, ...props },
+  ref
+) {
+  return (
+    <StyledFlexbox
+      ref={ref}
+      as={tag}
+      spacingType={spacingType}
+      visuallyHidden={visuallyHidden}
+      {...props}
+      css={inlineCSS}
+    >
+      {children}
+    </StyledFlexbox>
+  );
+});
+
+export default Flexbox;

package/components/Flexbox/index.ts

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