@dotss/ui 1.0.3 → 1.0.4

package/components/Autocomplete/Autocomplete.tsx

@@ -1,478 +0,0 @@
-import type { ChangeEvent, KeyboardEvent, ReactNode, Ref, SyntheticEvent } from 'react';
-import {
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useId,
-  useImperativeHandle,
-  useRef,
-  useState
-} from 'react';
-
-import CircularProgressIndicator from '@components/CircularProgressIndicator';
-import Flexbox from '@components/Flexbox';
-
-import Icon from '@components/Icon';
-import Menu, { MenuBlock } from '@components/Menu';
-import type { MenuProps } from '@components/Menu/Menu';
-import type { MenuBlockProps } from '@components/Menu/MenuBlock/MenuBlock';
-import TextField from '@components/TextField';
-import type { TextFieldProps } from '@components/TextField/TextField';
-import Typography from '@components/Typography';
-import useTheme from '@core/useTheme';
-import getSibling from '@utils/getSibling/getSibling';
-
-const TRANSITION_DURATION = 100;
-
-export interface Option {
-  value: string;
-  label: string;
-  menuBlockProps?: MenuBlockProps;
-}
-
-export interface AutocompleteProps {
-  inputValue: string;
-  onInputChange: (inputValue: string, e?: SyntheticEvent) => void;
-  menuValue: Option['value'];
-  onMenuChange: (menuValue: string, e: SyntheticEvent, option: Option | null) => void;
-  options: Array<Option>;
-  minInputLengthForMenu?: number;
-  inputProps?: TextFieldProps;
-  menuProps?: MenuProps;
-  isLoading?: boolean;
-  renderOptions?: (
-    option: Option,
-    index: number,
-    options: AutocompleteProps['options']
-  ) => ReactNode;
-  renderEmpty?: (searchText: string) => ReactNode;
-  filterOptions?: (options: AutocompleteProps['options']) => AutocompleteProps['options'];
-  getOptionLabel?: (option: Option) => Option['label'];
-}
-
-const Autocomplete = forwardRef<HTMLDivElement, AutocompleteProps>(function Autocomplete(
-  {
-    inputValue,
-    onInputChange,
-    menuValue,
-    onMenuChange,
-    inputProps,
-    minInputLengthForMenu = 0,
-    options = [],
-    isLoading = false,
-    renderOptions,
-    renderEmpty,
-    filterOptions,
-    getOptionLabel
-  }: AutocompleteProps,
-  ref: Ref<HTMLDivElement>
-) {
-  const anchorRef = useRef<HTMLDivElement>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-  const autocompleteMenuId = useId();
-
-  const { palette } = useTheme();
-
-  useImperativeHandle(ref, () => anchorRef.current as HTMLDivElement);
-
-  const [isOpen, setIsOpen] = useState(false);
-  const [focusedOptionId, setFocusedOptionId] = useState<string | undefined>(undefined);
-  const isProcessingKeyDown = useRef(false);
-
-  const filteredOptions = filterOptions
-    ? filterOptions(options)
-    : options.filter((option) => option.label.includes(inputValue));
-  const hasOptions = filteredOptions.length > 0;
-  const canOpenMenu = inputValue.length >= minInputLengthForMenu;
-
-  const handleOpen = () => {
-    // 메뉴가 열려있고, 선택된 값이 없는 경우 메뉴를 닫고 inputValue 초기화
-    if (isOpen && !menuValue) {
-      setIsOpen(false);
-      setTimeout(() => {
-        onInputChange('');
-      }, TRANSITION_DURATION);
-      return;
-    }
-
-    // 메뉴가 열려있고, 선택된 값이 있는 경우 메뉴를 닫고 inputValue를 원래 값으로 변경
-    if (isOpen && menuValue) {
-      const targetOption = filteredOptions.find((option) => option.value === menuValue);
-      if (targetOption) {
-        const originalLabel = getOptionLabel ? getOptionLabel(targetOption) : targetOption.label;
-        setIsOpen(false);
-        setTimeout(() => {
-          onInputChange(originalLabel);
-        });
-        return;
-      }
-    }
-
-    setIsOpen((prevState) => !prevState);
-  };
-
-  const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.value.length > 0) {
-      setIsOpen(true);
-    } else {
-      onMenuChange('', e, null);
-    }
-    onInputChange(e.target.value, e);
-  };
-
-  const handleFocusInput = () => {
-    if (canOpenMenu) {
-      setIsOpen(true);
-    }
-  };
-
-  const handleChangeMenu = (newValue?: string | number, e?: SyntheticEvent) => {
-    if (newValue === undefined) return;
-    if (!e || !(e?.target as HTMLElement)?.textContent) return;
-
-    const targetOption = filteredOptions.find((option) => option.value === newValue);
-
-    if (getOptionLabel) {
-      if (targetOption) {
-        setTimeout(() => {
-          onInputChange(getOptionLabel(targetOption), e);
-          onMenuChange(newValue.toString() as string, e, targetOption);
-        }, TRANSITION_DURATION);
-      }
-
-      return;
-    }
-
-    setTimeout(() => {
-      onInputChange((e.target as HTMLElement).textContent || '', e);
-      onMenuChange(newValue.toString() as string, e, targetOption || null);
-    }, TRANSITION_DURATION);
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (isProcessingKeyDown.current) return;
-
-    if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      isProcessingKeyDown.current = true;
-
-      const firstOption = menuRef.current?.querySelector('li[role="option"]') as HTMLElement;
-      if (!focusedOptionId) {
-        if (firstOption) {
-          setFocusedOptionId(firstOption.id);
-          firstOption.scrollIntoView({ block: 'end' });
-        }
-      } else {
-        const focusedOption = menuRef.current?.querySelector(
-          `#${CSS.escape(focusedOptionId)}`
-        ) as HTMLElement;
-        if (!focusedOption) {
-          isProcessingKeyDown.current = false;
-          return;
-        }
-        const nextSibling = getSibling(focusedOption, 'next', { skipDisabled: true });
-        if (nextSibling && nextSibling.id) {
-          setFocusedOptionId(nextSibling.id);
-          nextSibling.scrollIntoView({ block: 'end' });
-        }
-        if (!nextSibling) {
-          setFocusedOptionId(firstOption.id);
-          firstOption.scrollIntoView({ block: 'end' });
-        }
-      }
-
-      setTimeout(() => {
-        isProcessingKeyDown.current = false;
-      }, 0);
-    }
-
-    if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      isProcessingKeyDown.current = true;
-
-      if (!focusedOptionId) {
-        isProcessingKeyDown.current = false;
-        return;
-      }
-      const focusedOption = menuRef.current?.querySelector(
-        `#${CSS.escape(focusedOptionId)}`
-      ) as HTMLElement;
-      if (!focusedOption) {
-        isProcessingKeyDown.current = false;
-        return;
-      }
-      const prevSibling = getSibling(focusedOption, 'prev', { skipDisabled: true });
-      if (prevSibling && prevSibling.id) {
-        setFocusedOptionId(prevSibling.id);
-        prevSibling.scrollIntoView({ block: 'end' });
-      }
-      if (!prevSibling) {
-        const lastOption = menuRef.current?.querySelector(
-          'li[role="option"]:last-child'
-        ) as HTMLElement;
-        if (lastOption) {
-          setFocusedOptionId(lastOption.id);
-          lastOption.scrollIntoView({ block: 'end' });
-        }
-      }
-
-      setTimeout(() => {
-        isProcessingKeyDown.current = false;
-      }, 0);
-    }
-
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      isProcessingKeyDown.current = true;
-
-      if (!focusedOptionId) {
-        isProcessingKeyDown.current = false;
-        return;
-      }
-
-      const focusedOption = menuRef.current?.querySelector(
-        `#${CSS.escape(focusedOptionId)}`
-      ) as HTMLElement;
-
-      if (!focusedOption) {
-        isProcessingKeyDown.current = false;
-        return;
-      }
-
-      const targetOption = filteredOptions.find(
-        (option) => option.value === focusedOption.dataset.value
-      );
-
-      setIsOpen(false);
-
-      if (getOptionLabel && targetOption) {
-        setTimeout(() => {
-          onInputChange(getOptionLabel(targetOption), e);
-          onMenuChange(focusedOption.dataset.value || '', e, targetOption);
-        }, TRANSITION_DURATION);
-      } else {
-        setTimeout(() => {
-          onInputChange(focusedOption.textContent || '', e);
-          onMenuChange(focusedOption.dataset.value || '', e, targetOption || null);
-        }, TRANSITION_DURATION);
-      }
-
-      setTimeout(() => {
-        isProcessingKeyDown.current = false;
-      }, 0);
-    }
-
-    if (e.key === 'Home') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      isProcessingKeyDown.current = true;
-
-      const firstOption = menuRef.current?.querySelector('li[role="option"]') as HTMLElement;
-      if (firstOption) {
-        setFocusedOptionId(firstOption.id);
-        firstOption.scrollIntoView({ block: 'start' });
-      }
-
-      setTimeout(() => {
-        isProcessingKeyDown.current = false;
-      }, 0);
-    }
-
-    if (e.key === 'End') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      isProcessingKeyDown.current = true;
-
-      const lastOption = menuRef.current?.querySelector(
-        'li[role="option"]:last-child'
-      ) as HTMLElement;
-      if (lastOption) {
-        setFocusedOptionId(lastOption.id);
-        lastOption.scrollIntoView({ block: 'end' });
-      }
-
-      setTimeout(() => {
-        isProcessingKeyDown.current = false;
-      }, 0);
-    }
-
-    if (e.key === 'Escape') {
-      e.preventDefault();
-      e.stopPropagation();
-
-      isProcessingKeyDown.current = true;
-      handleOpen();
-
-      setTimeout(() => {
-        isProcessingKeyDown.current = false;
-      }, 0);
-    }
-  };
-
-  const handleClickClear = (e: SyntheticEvent) => {
-    setIsOpen(false);
-    setTimeout(() => {
-      onInputChange('', e);
-      onMenuChange('', e, null);
-    }, TRANSITION_DURATION);
-  };
-
-  const handleKeyDownClear = (e: KeyboardEvent<SVGElement>) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      handleClickClear(e);
-    }
-  };
-
-  useEffect(() => {
-    if (!isOpen) {
-      setFocusedOptionId(undefined);
-    }
-  }, [isOpen]);
-
-  return (
-    <Flexbox ref={anchorRef} inlineCSS={{ position: 'relative' }}>
-      <TextField
-        value={inputValue}
-        onChange={handleChangeInput}
-        onFocus={handleFocusInput}
-        onKeyDown={handleKeyDown}
-        fullWidth
-        autoComplete="off"
-        role="combobox"
-        aria-expanded={isOpen}
-        aria-autocomplete="list"
-        aria-controls={autocompleteMenuId}
-        aria-activedescendant={focusedOptionId}
-        aria-busy={isLoading}
-        aria-haspopup="listbox"
-        endAdornment={
-          inputValue ? (
-            <Icon
-              name="InvalidFill"
-              color="grey.50"
-              size="medium"
-              role="button"
-              onClick={handleClickClear}
-              onKeyDown={handleKeyDownClear}
-              tabIndex={0}
-              aria-hidden={false}
-              focusable={true}
-              aria-label="지우기"
-              inlineCSS={{ cursor: 'pointer' }}
-            />
-          ) : null
-        }
-        inlineCSS={{ '& svg': { flexShrink: 0 } }}
-        {...inputProps}
-      />
-      <Menu
-        id={autocompleteMenuId}
-        value={menuValue}
-        ref={menuRef}
-        anchorRef={anchorRef}
-        open={isOpen && inputValue.length >= minInputLengthForMenu}
-        onClose={handleOpen}
-        onChange={handleChangeMenu}
-        transitionDuration={TRANSITION_DURATION}
-        disablePadding={!canOpenMenu}
-      >
-        {isLoading && (
-          <MenuBlock value="LOADING" disabled>
-            <Flexbox justifyContent="center">
-              <CircularProgressIndicator size="small" loop />
-            </Flexbox>
-          </MenuBlock>
-        )}
-        {!isLoading &&
-          hasOptions &&
-          filteredOptions.map((option, index) => {
-            const searchIndex = option.label.indexOf(inputValue);
-            const optionId = `menu-option-${option.value}-${option.label}`;
-            const isFocused = focusedOptionId === optionId;
-            const isSelected = option.value === menuValue;
-
-            if (renderOptions && typeof renderOptions === 'function') {
-              const renderedElement = renderOptions(option, index, filteredOptions);
-
-              if (isValidElement(renderedElement)) {
-                return cloneElement(renderedElement, {
-                  id: optionId,
-                  key: option.value,
-                  role: 'option',
-                  'aria-selected': isFocused,
-                  'data-value': option.value,
-                  inlineCSS: {
-                    border: isFocused ? `2px solid ${palette.grey['100']}` : '2px solid transparent'
-                  },
-                  ...renderedElement.props
-                });
-              }
-
-              return renderedElement;
-            }
-
-            if (inputValue && !option.label.includes(inputValue)) return undefined;
-            if (!canOpenMenu) return undefined;
-
-            return (
-              <MenuBlock
-                id={optionId}
-                key={option.value}
-                value={option.value}
-                role="option"
-                aria-selected={isFocused}
-                data-value={option.value}
-                inlineCSS={{
-                  border: isFocused ? `2px solid ${palette.grey['100']}` : '2px solid transparent'
-                }}
-                {...option?.menuBlockProps}
-              >
-                {inputValue && !isSelected ? (
-                  <>
-                    {option.label.slice(0, searchIndex)}
-                    <Typography tag="span" variant="h5B" color="primary">
-                      {option.label.slice(searchIndex, searchIndex + inputValue.length)}
-                    </Typography>
-                    {option.label.slice(searchIndex + inputValue.length)}
-                  </>
-                ) : (
-                  option.label
-                )}
-              </MenuBlock>
-            );
-          })}
-        {!isLoading &&
-          !hasOptions &&
-          (renderEmpty ? (
-            (() => {
-              const element = renderEmpty(inputValue);
-
-              if (isValidElement<MenuBlockProps>(element)) {
-                return cloneElement(element, {
-                  ...element.props,
-                  disabled: true
-                });
-              }
-
-              return element;
-            })()
-          ) : (
-            <MenuBlock value="NO_OPTION" disabled>
-              검색 결과가 없어요.
-            </MenuBlock>
-          ))}
-      </Menu>
-    </Flexbox>
-  );
-});
-
-export default Autocomplete;

package/components/Autocomplete/index.ts

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

package/components/Backdrop/Backdrop.stories.tsx

@@ -1,84 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Button from '@components/Button';
-import Typography from '@components/Typography';
-
-import Backdrop from './Backdrop';
-
-const meta = {
-  title: 'Component/Backdrop',
-  component: Backdrop,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Backdrop>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Backdrop</Button>
-        <Backdrop
-          open={isOpen}
-          onClose={handleOpen}
-          fullScreen={props?.fullScreen}
-          transitionDuration={props?.transitionDuration}
-          centered={props?.centered}
-        >
-          <Typography color="primary">Backdrop</Typography>
-        </Backdrop>
-      </>
-    );
-  },
-  args: {
-    fullScreen: false,
-    transitionDuration: 200,
-    centered: false
-  }
-};
-
-export const Centered: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Backdrop</Button>
-        <Backdrop
-          open={isOpen}
-          onClose={handleOpen}
-          fullScreen={props?.fullScreen}
-          transitionDuration={props?.transitionDuration}
-          centered={props?.centered}
-        >
-          <Typography color="primary">Backdrop</Typography>
-        </Backdrop>
-      </>
-    );
-  },
-  args: {
-    fullScreen: false,
-    transitionDuration: 200,
-    centered: true
-  }
-};

package/components/Backdrop/Backdrop.styles.ts

@@ -1,69 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { BackdropProps } from './Backdrop';
-
-export const Dimmed = styled.div<
-  Pick<BackdropProps, 'open' | 'transitionDuration'> & {
-    hasContainer: boolean;
-    containerTop: number;
-    containerLeft: number;
-    containerWidth: number;
-    containerHeight: number;
-  }
->`
-  position: fixed;
-
-  ${({ hasContainer, containerTop, containerLeft, containerWidth, containerHeight }): CSSObject => {
-    if (hasContainer) {
-      return {
-        top: containerTop,
-        left: containerLeft,
-        width: containerWidth,
-        height: containerHeight
-      };
-    }
-
-    return {
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%'
-    };
-  }};
-
-  z-index: 100000;
-
-  background-color: ${({
-    theme: {
-      palette: { etc }
-    }
-  }) => etc.dimmed01};
-  transition: opacity ${({ transitionDuration }) => transitionDuration}ms;
-  opacity: ${({ open }) => (open ? 1 : 0)};
-`;
-
-export const DimmedInner = styled.div<Pick<BackdropProps, 'fullScreen' | 'centered'>>`
-  position: relative;
-
-  ${({ theme: { spacing }, fullScreen }): CSSObject =>
-    fullScreen
-      ? {
-          width: '100%',
-          height: '100%'
-        }
-      : {
-          width: `calc(100% - ${spacing.content(10)}px)`,
-          height: `calc(100% - ${spacing.content(10)}px)`,
-          margin: spacing.content(5)
-        }};
-  
-  ${({ centered }): CSSObject | null =>
-    centered
-      ? {
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center'
-        }
-      : null}}
-`;