@dotss/ui 0.0.7 → 0.0.10

package/components/Autocomplete/Autocomplete.tsx

@@ -1,217 +0,0 @@
-import type { ChangeEvent, MouseEvent, ReactNode, Ref, SyntheticEvent } from 'react';
-import {
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  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';
-
-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);
-
-  useImperativeHandle(ref, () => anchorRef.current as HTMLDivElement);
-
-  const [isOpen, setIsOpen] = useState(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 = () => 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?: MouseEvent) => {
-    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 handleClickClear = (e: MouseEvent<SVGElement>) => {
-    setIsOpen(false);
-    setTimeout(() => {
-      onInputChange('', e);
-      onMenuChange('', e, null);
-    }, TRANSITION_DURATION);
-  };
-
-  return (
-    <Flexbox ref={anchorRef} inlineCSS={{ position: 'relative' }}>
-      <TextField
-        value={inputValue}
-        onChange={handleChangeInput}
-        onFocus={handleFocusInput}
-        fullWidth
-        endAdornment={
-          inputValue ? (
-            <Icon
-              name="InvalidFill"
-              color="grey.50"
-              size="medium"
-              onClick={handleClickClear}
-              inlineCSS={{ cursor: 'pointer' }}
-            />
-          ) : null
-        }
-        inlineCSS={{ '& svg': { flexShrink: 0 } }}
-        {...inputProps}
-      />
-      <Menu
-        value={menuValue}
-        anchorRef={anchorRef}
-        open={isOpen && inputValue.length >= minInputLengthForMenu}
-        onClose={handleOpen}
-        onChange={handleChangeMenu}
-        transitionDuration={TRANSITION_DURATION}
-        disablePadding={!canOpenMenu}
-        disableClickOutside={!inputValue}
-      >
-        {isLoading && (
-          <MenuBlock value="LOADING" disabled>
-            <Flexbox justifyContent="center">
-              <CircularProgressIndicator size="small" loop />
-            </Flexbox>
-          </MenuBlock>
-        )}
-        {!isLoading &&
-          hasOptions &&
-          filteredOptions.map((option, index) => {
-            if (renderOptions && typeof renderOptions === 'function')
-              return renderOptions(option, index, filteredOptions);
-
-            if (inputValue && !option.label.includes(inputValue)) return undefined;
-            if (!canOpenMenu) return undefined;
-
-            const searchIndex = option.label.indexOf(inputValue);
-
-            return (
-              <MenuBlock key={option.value} value={option.value} {...option?.menuBlockProps}>
-                {inputValue ? (
-                  <>
-                    {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}}
-`;

package/components/Backdrop/Backdrop.tsx

@@ -1,140 +0,0 @@
-import type { HTMLAttributes, RefObject } from 'react';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-
-import { createPortal } from 'react-dom';
-
-import type { GeneralComponentProps } from '@typings/component';
-
-import { Dimmed, DimmedInner } from './Backdrop.styles';
-
-export interface BackdropProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  open?: boolean;
-  onClose?: () => void;
-  transitionDuration?: number;
-  fullScreen?: boolean;
-  centered?: boolean;
-  containerRef?: RefObject<HTMLElement>;
-}
-
-const Backdrop = forwardRef<HTMLDivElement, BackdropProps>(function Backdrop(
-  {
-    children,
-    open,
-    onClose,
-    transitionDuration = 200,
-    fullScreen,
-    centered,
-    containerRef,
-    inlineCSS,
-    ...props
-  },
-  ref
-) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [isClosed, setIsClosed] = useState(true);
-  const [containerTop, setContainerTop] = useState(0);
-  const [containerLeft, setContainerLeft] = useState(0);
-  const [containerWidth, setContainerWidth] = useState(0);
-  const [containerHeight, setContainerHeight] = useState(0);
-
-  const openTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const closeTimerRef = useRef<ReturnType<typeof setTimeout>>();
-
-  const hasContainer = !!containerRef?.current;
-
-  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);
-      }
-
-      document.body.removeAttribute('style');
-
-      setIsOpen(false);
-
-      closeTimerRef.current = setTimeout(() => {
-        setIsClosed(true);
-      }, transitionDuration);
-    }
-  }, [open, transitionDuration]);
-
-  useEffect(() => {
-    const containerElement = containerRef?.current;
-
-    const handleResize = () => {
-      if (!containerElement) return;
-
-      setContainerTop(containerElement?.offsetTop || 0);
-      setContainerLeft(containerElement.getBoundingClientRect()?.left || 0);
-      setContainerWidth(containerElement?.offsetWidth || 0);
-      setContainerHeight(containerElement?.offsetHeight || 0);
-    };
-
-    if (containerElement) {
-      handleResize();
-
-      window.addEventListener('resize', handleResize);
-    }
-
-    return () => {
-      if (containerElement) {
-        window.removeEventListener('resize', handleResize);
-      }
-    };
-  }, [containerRef]);
-
-  useEffect(() => {
-    return () => {
-      document.body.removeAttribute('style');
-
-      if (openTimerRef.current) {
-        clearTimeout(openTimerRef.current);
-      }
-      if (closeTimerRef.current) {
-        clearTimeout(closeTimerRef.current);
-      }
-    };
-  }, []);
-
-  if (isClosed) return null;
-
-  return createPortal(
-    <Dimmed
-      ref={ref}
-      open={isOpen}
-      transitionDuration={transitionDuration}
-      onClick={onClose}
-      hasContainer={hasContainer}
-      containerTop={containerTop}
-      containerLeft={containerLeft}
-      containerWidth={containerWidth}
-      containerHeight={containerHeight}
-      {...props}
-      css={inlineCSS}
-    >
-      <DimmedInner fullScreen={fullScreen} centered={centered}>
-        {children}
-      </DimmedInner>
-    </Dimmed>,
-    document.body
-  );
-});
-
-export default Backdrop;

package/components/Backdrop/index.ts

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

package/components/Badge/Badge.stories.tsx

@@ -1,66 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Button from '@components/Button';
-import Flexbox from '@components/Flexbox';
-import Typography from '@components/Typography';
-
-import Badge from './Badge';
-
-const meta = {
-  title: 'Component/Badge',
-  component: Badge,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Absolute: Story = {
-  render: (props) => {
-    return (
-      <Badge
-        position={props?.position}
-        color={props?.color}
-        size={props?.size}
-        horizontal={props?.horizontal}
-        content={props?.content}
-      >
-        <Button>Button</Button>
-      </Badge>
-    );
-  },
-  args: {
-    position: 'absolute',
-    size: 'large',
-    color: 'pink',
-    horizontal: 'right',
-    content: 2
-  }
-};
-
-export const Static: Story = {
-  render: (props) => {
-    return (
-      <Flexbox alignItems="center" justifyContent="space-between" gap={10}>
-        <Typography variant="h4B">놀이부터 돌봄까지</Typography>
-        <Badge
-          position={props?.position}
-          color={props?.color}
-          size={props?.size}
-          horizontal={props?.horizontal}
-          content={props?.content}
-        />
-      </Flexbox>
-    );
-  },
-  args: {
-    position: 'static',
-    size: 'large',
-    color: 'pink',
-    horizontal: 'right',
-    content: 2
-  }
-};

package/components/Badge/Badge.styles.ts

@@ -1,75 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { BadgeProps } from './Badge';
-
-export const Wrapper = styled.div`
-  position: relative;
-  width: inherit;
-`;
-
-export const StyledBadge = styled.div<
-  Pick<BadgeProps, 'position' | 'color' | 'size' | 'horizontal'>
->`
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: ${({ position }) => position};
-  border-radius: 20px;
-
-  ${({
-    theme: {
-      palette: { pink, etc }
-    },
-    color
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      backgroundColor: pink['90']
-    };
-
-    if (color === 'orange') {
-      cssObject = {
-        backgroundColor: etc.orange
-      };
-    }
-
-    return cssObject;
-  }};
-
-  ${({ size, horizontal }): CSSObject => {
-    let cssObject: CSSObject = {
-      height: 8,
-      minWidth: 8,
-      top: 0,
-      left: horizontal === 'left' ? 0 : 'auto',
-      right: horizontal === 'right' ? 0 : 'auto'
-    };
-
-    if (size === 'large') {
-      cssObject = {
-        height: 16,
-        minWidth: 16,
-        top: -4,
-        left: horizontal === 'left' ? -8 : 'auto',
-        right: horizontal === 'right' ? -8 : 'auto'
-      };
-    }
-
-    return cssObject;
-  }};
-`;
-
-export const Content = styled.span`
-  ${({
-    theme: {
-      palette: { grey },
-      typography: { c4B }
-    }
-  }) => ({
-    fontSize: c4B.size,
-    fontWeight: c4B.weight,
-    lineHeight: c4B.lineHeight,
-    letterSpacing: c4B.letterSpacing,
-    color: grey.white
-  })}
-`;