@dotss/ui 1.0.3 → 1.0.5

package/components/Snackbar/Snackbar.tsx

@@ -1,248 +0,0 @@
-import type { HTMLAttributes, MouseEvent, ReactNode, RefObject } from 'react';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-
-import { createPortal } from 'react-dom';
-
-import Icon from '@components/Icon';
-import IconButton from '@components/IconButton';
-
-import type { BrandColorKey } from '@typings/color';
-import type { GeneralComponentProps } from '@typings/component';
-
-import { Closer, Content, IconWrapper, StyledSnackbar } from './Snackbar.styles';
-
-export interface SnackbarProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  open?: boolean;
-  onClose?: () => void;
-  hideClose?: boolean;
-  bottom?: number;
-  variant?: BrandColorKey;
-  icon?: ReactNode;
-  action?: ReactNode;
-  severity?: 'success' | 'error';
-  transitionDuration?: number;
-  autoHideDuration?: number;
-  containerRef?: RefObject<HTMLElement>;
-  role?: 'alert' | 'status';
-  ariaLive?: 'polite' | 'assertive' | 'off';
-  focusable?: boolean;
-}
-
-// TODO
-// 1. Stack 형태의 렌더링 방식 구현
-// 2. Position 지정 기능 구현
-// 3. 추후 다크모드 지원에 따른 대응 필요 (현재 임시로 variant 로 라이트/다크 색상을 구현해 놓았음)
-const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(function Snackbar(
-  {
-    children,
-    open,
-    onClose,
-    hideClose,
-    bottom = 96,
-    icon,
-    action,
-    severity,
-    variant = 'primary',
-    transitionDuration = 200,
-    autoHideDuration = 3000,
-    containerRef,
-    inlineCSS,
-    role = 'alert',
-    ariaLive = 'assertive',
-    focusable = false,
-    ...props
-  },
-  ref
-) {
-  const contentRef = useRef<HTMLDivElement>(null);
-  const previouslyFocusedElement = useRef<HTMLElement | null>(null);
-
-  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 openTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const closeTimerRef = useRef<ReturnType<typeof setTimeout>>();
-  const autoHideTimerRef = useRef<ReturnType<typeof setTimeout>>();
-
-  const hasIcon = !!icon || ['success', 'error'].includes(severity as string);
-  const hasContainer = !!containerRef?.current;
-
-  const handleClick = (e: MouseEvent<HTMLDivElement>) => e.stopPropagation();
-
-  useEffect(() => {
-    if (open) {
-      if (focusable) {
-        previouslyFocusedElement.current = document.activeElement as HTMLElement;
-      }
-
-      if (autoHideTimerRef.current) {
-        clearTimeout(autoHideTimerRef.current);
-      }
-      if (closeTimerRef.current) {
-        clearTimeout(closeTimerRef.current);
-      }
-
-      setIsClosed(false);
-
-      openTimerRef.current = setTimeout(() => {
-        setIsOpen(true);
-
-        if (focusable && contentRef.current) {
-          const focusableElem = contentRef.current.parentElement?.querySelector<HTMLElement>(
-            'button, [tabindex]:not([tabindex="-1"])'
-          );
-          focusableElem?.focus();
-        }
-        // Mount Delay
-      }, 100);
-    }
-  }, [open, focusable]);
-
-  useEffect(() => {
-    if (!open) {
-      if (autoHideTimerRef.current) {
-        clearTimeout(autoHideTimerRef.current);
-      }
-      if (openTimerRef.current) {
-        clearTimeout(openTimerRef.current);
-      }
-
-      setIsOpen(false);
-
-      closeTimerRef.current = setTimeout(() => {
-        setIsClosed(true);
-
-        if (focusable && previouslyFocusedElement.current) {
-          previouslyFocusedElement.current.focus();
-          previouslyFocusedElement.current = null;
-        }
-      }, transitionDuration);
-    }
-  }, [open, transitionDuration, focusable]);
-
-  useEffect(() => {
-    if (isOpen && autoHideDuration) {
-      if (autoHideTimerRef.current) {
-        clearTimeout(autoHideTimerRef.current);
-      }
-
-      autoHideTimerRef.current = setTimeout(() => {
-        if (typeof onClose === 'function') {
-          onClose();
-        }
-      }, autoHideDuration);
-    }
-  }, [isOpen, onClose, autoHideDuration]);
-
-  useEffect(() => {
-    const handleMouseDown = (e: globalThis.MouseEvent) => {
-      if (!contentRef.current) return;
-
-      if (!contentRef.current?.parentNode?.contains(e.target as Node)) {
-        if (typeof onClose === 'function') {
-          onClose();
-        }
-      }
-    };
-
-    window.addEventListener('mousedown', handleMouseDown);
-
-    return () => {
-      window.removeEventListener('mousedown', handleMouseDown);
-    };
-  }, [onClose]);
-
-  useEffect(() => {
-    const containerElement = containerRef?.current;
-
-    const handleResize = () => {
-      if (!containerElement) return;
-
-      setContainerTop(containerElement?.offsetTop || 0);
-      setContainerLeft(containerElement.getBoundingClientRect()?.left || 0);
-      setContainerWidth(containerElement?.offsetWidth || 0);
-    };
-
-    if (containerElement) {
-      handleResize();
-
-      window.addEventListener('resize', handleResize);
-    }
-
-    return () => {
-      if (containerElement) {
-        window.removeEventListener('resize', handleResize);
-      }
-    };
-  }, [containerRef]);
-
-  useEffect(() => {
-    return () => {
-      if (openTimerRef.current) {
-        clearTimeout(openTimerRef.current);
-      }
-      if (closeTimerRef.current) {
-        clearTimeout(closeTimerRef.current);
-      }
-      if (autoHideTimerRef.current) {
-        clearTimeout(autoHideTimerRef.current);
-      }
-    };
-  }, []);
-
-  if (isClosed) return null;
-
-  return createPortal(
-    <StyledSnackbar
-      ref={ref}
-      open={isOpen}
-      variant={variant}
-      bottom={bottom}
-      transitionDuration={transitionDuration}
-      onClick={handleClick}
-      hasContainer={hasContainer}
-      containerTop={containerTop}
-      containerLeft={containerLeft}
-      containerWidth={containerWidth}
-      role={role}
-      aria-live={ariaLive}
-      {...props}
-      css={inlineCSS}
-    >
-      {hasIcon && (
-        <IconWrapper>
-          {/* tictoccroc.brand.green 대신 green.70 으로 적용 */}
-          {/* 피그마 상에는 tictoccroc.brand.green 으로 정의되어 있으나, 다른 테마가 적용되는 경우를 고려하여 기본 Palette 구조에서의 ColorScale 적용 */}
-          {!icon && severity === 'success' && <Icon name="CompleteFill" color="green.70" />}
-          {!icon && severity === 'error' && <Icon name="AlertFill" color="etc.red" />}
-          {icon}
-        </IconWrapper>
-      )}
-      <Content
-        ref={contentRef}
-        variant={variant}
-        hasIcon={hasIcon}
-        tabIndex={focusable ? -1 : undefined}
-      >
-        {children}
-      </Content>
-      {!hideClose && !action && (
-        <Closer variant={variant}>
-          <IconButton
-            name="CloseLine"
-            color={variant === 'primary' ? 'tertiary' : 'primary'}
-            onClick={onClose}
-            aria-label="닫기"
-          />
-        </Closer>
-      )}
-      {action}
-    </StyledSnackbar>,
-    document.body
-  );
-});
-
-export default Snackbar;

package/components/Snackbar/index.ts

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

package/components/Switch/Switch.stories.tsx

@@ -1,97 +0,0 @@
-import type { ChangeEvent } from 'react';
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Switch from './Switch';
-
-const meta = {
-  title: 'Component/Switch',
-  component: Switch,
-  parameters: {
-    layout: 'centered'
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Switch>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [selected, setSelected] = useState(false);
-    const [disabled, setDisabled] = useState(false);
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      setSelected(e.target.checked);
-    };
-
-    useEffect(() => {
-      setSelected(props?.selected || false);
-    }, [props?.selected]);
-
-    useEffect(() => {
-      setDisabled(props?.disabled || false);
-    }, [props?.disabled]);
-
-    return (
-      <Switch
-        onChange={handleChange}
-        selected={selected}
-        disabled={disabled}
-        transitionDuration={props.transitionDuration}
-        unselectedLabel={props.unselectedLabel}
-        selectedLabel={props.selectedLabel}
-      />
-    );
-  },
-  args: {
-    onChange: () => {},
-    selected: true,
-    disabled: false,
-    transitionDuration: 150,
-    unselectedLabel: '',
-    selectedLabel: ''
-  }
-};
-
-export const Label: Story = {
-  render: (props) => {
-    const [selected, setSelected] = useState(false);
-    const [disabled, setDisabled] = useState(false);
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      setSelected(e.target.checked);
-    };
-
-    useEffect(() => {
-      setSelected(props?.selected || false);
-    }, [props?.selected]);
-
-    useEffect(() => {
-      setDisabled(props?.disabled || false);
-    }, [props?.disabled]);
-
-    return (
-      <Switch
-        onChange={handleChange}
-        selected={selected}
-        disabled={disabled}
-        transitionDuration={props.transitionDuration}
-        unselectedLabel={props.unselectedLabel}
-        selectedLabel={props.selectedLabel}
-        inputProps={{
-          'aria-label': '교사 활동 상태'
-        }}
-      />
-    );
-  },
-  args: {
-    onChange: () => {},
-    selected: true,
-    disabled: false,
-    transitionDuration: 150,
-    unselectedLabel: '쉬는중',
-    selectedLabel: '활동중'
-  }
-};

package/components/Switch/Switch.styles.ts

@@ -1,210 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { SwitchProps } from '@components/Switch/Switch';
-
-export const StyledSwitch = styled.div<
-  Pick<SwitchProps, 'selected' | 'disabled' | 'transitionDuration'>
->`
-  position: relative;
-  display: flex;
-  min-width: 56px;
-  height: 32px;
-  padding: ${({ theme: { spacing } }) => `${spacing.content(1)}px`};
-  align-items: center;
-  border-radius: 20px;
-  transition: ${({ transitionDuration }) => `background-color ${transitionDuration}ms ease-in-out`};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-
-  ${({
-    theme: {
-      palette: { brand, grey }
-    },
-    selected,
-    disabled
-  }): CSSObject => {
-    if (selected && disabled) {
-      return {
-        backgroundColor: brand.primary.bg
-      };
-    }
-    if (selected && !disabled) {
-      return {
-        backgroundColor: brand.primary.main
-      };
-    }
-    if (!selected && disabled) {
-      return {
-        backgroundColor: grey['20']
-      };
-    }
-    if (!selected && !disabled) {
-      return {
-        backgroundColor: grey['40']
-      };
-    }
-    return {};
-  }}
-`;
-
-export const StyledSwitchThumb = styled.div<
-  Pick<SwitchProps, 'selected' | 'disabled' | 'transitionDuration'> & {
-    labelWidth: number;
-    withLabel: boolean;
-  }
->`
-  position: absolute;
-  right: ${({ withLabel }) => (withLabel ? '24px' : 'auto')};
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  transition: ${({ transitionDuration }) => `all ${transitionDuration}ms ease-in-out`};
-  transition-property: background-color, transform, filter;
-
-  ${({
-    theme: {
-      palette: { grey, background },
-      spacing
-    },
-    selected,
-    disabled,
-    labelWidth,
-    withLabel
-  }): CSSObject => {
-    if (withLabel) {
-      if (selected && disabled) {
-        return {
-          backgroundColor: grey.white,
-          transform: `translateX(calc(100% - ${spacing.content(1)}px))`
-        };
-      }
-      if (selected && !disabled) {
-        return {
-          backgroundColor: grey.white,
-          filter: 'drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))',
-          transform: `translateX(calc(100% - ${spacing.content(1)}px))`
-        };
-      }
-      if (!selected && disabled) {
-        return {
-          backgroundColor: background.primary,
-          transform: `translateX(calc(100% - ${labelWidth + spacing.content(1)}px))`
-        };
-      }
-      if (!selected && !disabled) {
-        return {
-          backgroundColor: grey.white,
-          filter: 'drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))',
-          transform: `translateX(calc(100% - ${labelWidth + spacing.content(1)}px))`
-        };
-      }
-    } else {
-      if (selected && disabled) {
-        return {
-          backgroundColor: grey.white,
-          transform: 'translateX(100%)'
-        };
-      }
-      if (selected && !disabled) {
-        return {
-          backgroundColor: grey.white,
-          filter: 'drop-shadow(0px 0px 16px rgba(69, 55, 55, 0.2))',
-          transform: 'translateX(100%)'
-        };
-      }
-      if (!selected && disabled) {
-        return {
-          backgroundColor: background.primary
-        };
-      }
-      if (!selected && !disabled) {
-        return {
-          backgroundColor: grey.white,
-          filter: 'drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.20))'
-        };
-      }
-    }
-    return {};
-  }}
-`;
-
-export const BaseInput = styled.input`
-  position: absolute;
-  appearance: none;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  border-radius: 20px;
-  cursor: pointer;
-`;
-
-export const SwitchLabel = styled.div<{
-  variant: 'unselected' | 'selected';
-  selected: boolean;
-}>`
-  position: absolute;
-  opacity: ${({ selected }) => (selected ? 1 : 0)};
-  pointer-events: none;
-  transition: opacity 0.2s;
-
-  ${({ theme: { spacing }, variant }) => {
-    switch (variant) {
-      case 'unselected':
-        return {
-          right: spacing.content(2)
-        };
-      case 'selected':
-        return {
-          left: spacing.content(2)
-        };
-      default:
-        return {};
-    }
-  }}
-
-  ${({
-    theme: {
-      typography,
-      palette: { grey }
-    }
-  }): CSSObject => ({
-    fontSize: typography.c2M.size,
-    fontWeight: typography.c2M.weight,
-    lineHeight: typography.c2M.lineHeight,
-    color: grey.white
-  })}
-`;
-
-export const DummySwitchLabel = styled.div<{
-  variant: 'unselected' | 'selected';
-}>`
-  ${({ theme: { spacing }, variant }) => {
-    switch (variant) {
-      case 'unselected':
-        return {
-          marginRight: `${spacing.content(8)}px`
-        };
-      case 'selected':
-        return {
-          marginRight: `${spacing.content(8)}px`
-        };
-      default:
-        return {};
-    }
-  }}
-
-  visibility: hidden;
-
-  ${({
-    theme: {
-      typography,
-      palette: { grey }
-    }
-  }): CSSObject => ({
-    fontSize: typography.c2M.size,
-    fontWeight: typography.c2M.weight,
-    lineHeight: typography.c2M.lineHeight,
-    color: grey.white
-  })}
-`;

package/components/Switch/Switch.tsx

@@ -1,125 +0,0 @@
-import type { ChangeEventHandler, HTMLAttributes } from 'react';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-
-import {
-  BaseInput,
-  DummySwitchLabel,
-  StyledSwitch,
-  StyledSwitchThumb,
-  SwitchLabel
-} from '@components/Switch/Switch.styles';
-import useTheme from '@core/useTheme';
-import type { GeneralComponentProps } from '@typings/component';
-
-export interface SwitchProps extends GeneralComponentProps<HTMLAttributes<HTMLDivElement>> {
-  selected: boolean;
-  disabled?: boolean;
-  onChange: ChangeEventHandler<HTMLInputElement>;
-  transitionDuration?: number;
-  inputProps?: HTMLAttributes<HTMLInputElement>;
-  thumbProps?: HTMLAttributes<HTMLDivElement>;
-  selectedLabel?: string;
-  unselectedLabel?: string;
-}
-
-const Switch = forwardRef<HTMLDivElement, SwitchProps>(function Switch(
-  {
-    selected,
-    disabled,
-    onChange,
-    transitionDuration = 150,
-    inputProps,
-    thumbProps,
-    inlineCSS,
-    selectedLabel,
-    unselectedLabel,
-    ...props
-  },
-  ref
-) {
-  const { spacing } = useTheme();
-
-  const [unselectedLabelWidth, setUnselectedLabelWidth] = useState(0);
-  const [selectedLabelWidth, setSelectedLabelWidth] = useState(0);
-
-  const unselectedLabelRef = useRef<HTMLDivElement>(null);
-  const selectedLabelRef = useRef<HTMLDivElement>(null);
-
-  const hasLabel = !!selectedLabel || !!unselectedLabel;
-  const labelWidth = !selected
-    ? unselectedLabelWidth || selectedLabelWidth
-    : selectedLabelWidth || unselectedLabelWidth;
-
-  useEffect(() => {
-    const handleResize = () => {
-      const newCheckedLabelWidth = selectedLabelRef.current?.offsetWidth ?? 0;
-      const newUncheckedLabelWidth = unselectedLabelRef.current?.offsetWidth ?? 0;
-
-      if (newCheckedLabelWidth > 0) {
-        setSelectedLabelWidth(newCheckedLabelWidth + spacing.content(2));
-      }
-
-      if (newUncheckedLabelWidth > 0) {
-        setUnselectedLabelWidth(newUncheckedLabelWidth + spacing.content(2));
-      }
-    };
-
-    handleResize();
-
-    window.addEventListener('resize', handleResize);
-
-    return () => {
-      window.removeEventListener('resize', handleResize);
-    };
-  }, [spacing, unselectedLabel, selectedLabel, selected]);
-
-  return (
-    <StyledSwitch
-      ref={ref}
-      selected={selected}
-      disabled={disabled}
-      transitionDuration={transitionDuration}
-      css={inlineCSS}
-      {...props}
-    >
-      <StyledSwitchThumb
-        selected={selected}
-        disabled={disabled}
-        labelWidth={labelWidth}
-        withLabel={hasLabel}
-        transitionDuration={transitionDuration}
-        {...thumbProps}
-      />
-      <BaseInput
-        type="checkbox"
-        role="switch"
-        checked={selected}
-        disabled={disabled}
-        onChange={onChange}
-        {...inputProps}
-      />
-      {unselectedLabel && !selected && (
-        <DummySwitchLabel ref={unselectedLabelRef} variant="unselected" aria-hidden>
-          {unselectedLabel}
-        </DummySwitchLabel>
-      )}
-      {selectedLabel && selected && (
-        <DummySwitchLabel ref={selectedLabelRef} variant="selected" aria-hidden>
-          {selectedLabel}
-        </DummySwitchLabel>
-      )}
-      {unselectedLabel && (
-        <SwitchLabel variant="unselected" selected={!selected} aria-hidden={selected}>
-          {unselectedLabel}
-        </SwitchLabel>
-      )}
-      {selectedLabel && (
-        <SwitchLabel variant="selected" selected={selected} aria-hidden={!selected}>
-          {selectedLabel}
-        </SwitchLabel>
-      )}
-    </StyledSwitch>
-  );
-});
-
-export default Switch;

package/components/Switch/index.ts

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