@dotss/ui 0.0.6 → 0.0.8

package/components/Slider/Slider.tsx

@@ -1,179 +0,0 @@
-import type { HTMLAttributes, MouseEvent, TouchEvent } from 'react';
-import { forwardRef, useEffect, useRef, useState } from 'react';
-
-import Flexbox from '@components/Flexbox';
-import {
-  StyledMark,
-  StyledRail,
-  StyledSlider,
-  StyledThumb,
-  StyledTrack
-} from '@components/Slider/Slider.styles';
-import type { GeneralComponentProps } from '@typings/component';
-
-const PADDING = 10;
-
-// TODO: 키보드 접근성 추가
-export interface SliderProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
-  value: number;
-  onChange: (value: number) => void;
-  step?: number;
-  min?: number;
-  max?: number;
-  hasMarks?: boolean;
-  defaultValue?: number;
-  disabledValues?: number[];
-  railProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
-  trackProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
-  thumbProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
-}
-
-const Slider = forwardRef<HTMLDivElement, SliderProps>(function Skeleton(
-  {
-    value,
-    onChange,
-    step = 1,
-    min = 0,
-    max = 100,
-    hasMarks = true,
-    disabledValues = [],
-    railProps,
-    trackProps,
-    thumbProps,
-    inlineCSS,
-    ...props
-  },
-  ref
-) {
-  const marksRef = useRef<HTMLDivElement>(null);
-  const trackRef = useRef<HTMLDivElement>(null);
-  const railRef = useRef<HTMLDivElement>(null);
-
-  const [isDragging, setIsDragging] = useState(false);
-
-  const distance = 100 / ((max - min) / step);
-
-  const getClosestValue = (currentX: number) => {
-    if (marksRef.current) {
-      const currentOffset = currentX - marksRef.current.getBoundingClientRect().left;
-      const marks = Array.from(
-        marksRef.current.querySelectorAll<HTMLElement>('[class^="slider-mark-"]:not([disabled])')
-      );
-      const closestMark = marks.reduce((prev, cur) => {
-        return Math.abs(cur.offsetLeft - currentOffset) < Math.abs(prev.offsetLeft - currentOffset)
-          ? cur
-          : prev;
-      }, marks[0]);
-      const newValue = closestMark.getAttribute('data-value');
-      if (newValue !== null) {
-        return Number(newValue);
-      }
-      return null;
-    }
-    return null;
-  };
-
-  const handleStart = (clientX: number) => {
-    setIsDragging(true);
-    const newValue = getClosestValue(clientX);
-    if (newValue !== null) {
-      onChange(newValue);
-    }
-  };
-
-  const handleMove = (clientX: number) => {
-    if (!isDragging) return;
-    const newValue = getClosestValue(clientX);
-    if (newValue !== null) {
-      onChange(newValue);
-    }
-  };
-
-  const handleEnd = () => setIsDragging(false);
-
-  const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => handleStart(event.clientX);
-
-  const handleTouchStart = (event: TouchEvent<HTMLDivElement>) =>
-    handleStart(event.touches[0].clientX);
-
-  const handleMouseMove = (event: MouseEvent<HTMLDivElement>) => handleMove(event.clientX);
-
-  const handleTouchMove = (event: TouchEvent<HTMLDivElement>) =>
-    handleMove(event.touches[0].clientX);
-
-  useEffect(() => {
-    if (marksRef.current) {
-      const selectedMark = marksRef.current.querySelector<HTMLDivElement>(
-        `[data-value="${value}"]`
-      );
-      if (trackRef.current && selectedMark) {
-        const { offsetLeft, offsetWidth } = selectedMark;
-        trackRef.current.style.width = `${offsetLeft + offsetWidth + PADDING * 2}px`;
-      }
-    }
-  }, [value, min, max, step]);
-
-  return (
-    <StyledSlider
-      ref={ref}
-      {...props}
-      className="slider"
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleEnd}
-      onMouseLeave={handleEnd}
-      onTouchStart={handleTouchStart}
-      onTouchMove={handleTouchMove}
-      onTouchEnd={handleEnd}
-      onTouchCancel={handleEnd}
-      css={inlineCSS}
-    >
-      <StyledRail ref={railRef} {...railProps} css={railProps?.inlineCSS} className="slider-rail" />
-      <StyledTrack
-        ref={trackRef}
-        {...trackProps}
-        css={trackProps?.inlineCSS}
-        className="slider-track"
-      />
-      <Flexbox
-        className="slider-mark-wrapper"
-        alignItems="center"
-        ref={marksRef}
-        inlineCSS={{
-          margin: `0 ${PADDING + 2}px`,
-          width: '100%',
-          height: '24px',
-          position: 'relative'
-        }}
-      >
-        {max > 0 &&
-          min < max &&
-          step > 0 &&
-          Array.from({ length: (max - min) / step + 1 }, (_, index) => {
-            return (
-              <StyledMark
-                key={`slider-mark-${value}:${min + step * index}`}
-                className={`slider-mark-${index} slider-mark`}
-                marked={index <= (value - min) / step}
-                hasMarks={hasMarks}
-                disabled={disabledValues.includes(min + step * index)}
-                data-value={min + step * index}
-                style={{
-                  left: `${distance * index}%`
-                }}
-              />
-            );
-          })}
-        <StyledThumb
-          {...thumbProps}
-          className="slider-thumb"
-          css={thumbProps?.inlineCSS}
-          style={{ left: `${(distance * (value - min)) / step}%` }}
-        />
-      </Flexbox>
-    </StyledSlider>
-  );
-});
-
-export default Slider;

package/components/Slider/index.ts

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

package/components/Snackbar/Snackbar.stories.tsx

@@ -1,374 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Button from '@components/Button';
-import Flexbox from '@components/Flexbox';
-import SvgIcon from '@components/Icon';
-import useTheme from '@core/useTheme';
-
-import Snackbar from './Snackbar';
-
-const meta = {
-  title: 'Component/Snackbar',
-  component: Snackbar,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    icon: {
-      control: {
-        disable: true
-      }
-    },
-    action: {
-      control: {
-        disable: true
-      }
-    },
-    containerRef: {
-      control: {
-        disable: true
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Snackbar>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleClose = () => setIsOpen(false);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Snackbar</Button>
-        <Snackbar
-          open={isOpen}
-          onClose={handleClose}
-          variant={props?.variant}
-          hideClose={props?.hideClose}
-          transitionDuration={props?.transitionDuration}
-          autoHideDuration={props?.autoHideDuration}
-          bottom={props?.bottom}
-          severity={props?.severity}
-        >
-          Snackbar
-        </Snackbar>
-      </>
-    );
-  },
-  args: {
-    open: false,
-    variant: 'primary',
-    transitionDuration: 200,
-    autoHideDuration: 3000,
-    hideClose: false,
-    bottom: 96
-  }
-};
-
-export const Secondary: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleClose = () => setIsOpen(false);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Snackbar</Button>
-        <Snackbar
-          open={isOpen}
-          onClose={handleClose}
-          variant={props?.variant}
-          hideClose={props?.hideClose}
-          transitionDuration={props?.transitionDuration}
-          autoHideDuration={props?.autoHideDuration}
-          bottom={props?.bottom}
-          severity={props?.severity}
-        >
-          Snackbar
-        </Snackbar>
-      </>
-    );
-  },
-  args: {
-    open: false,
-    variant: 'secondary',
-    transitionDuration: 200,
-    autoHideDuration: 3000,
-    hideClose: false,
-    bottom: 96
-  }
-};
-
-export const Severity: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleClose = () => setIsOpen(false);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Snackbar</Button>
-        <Snackbar
-          open={isOpen}
-          onClose={handleClose}
-          variant={props?.variant}
-          hideClose={props?.hideClose}
-          transitionDuration={props?.transitionDuration}
-          autoHideDuration={props?.autoHideDuration}
-          bottom={props?.bottom}
-          severity={props?.severity}
-        >
-          Snackbar
-        </Snackbar>
-      </>
-    );
-  },
-  args: {
-    open: false,
-    variant: 'primary',
-    transitionDuration: 200,
-    autoHideDuration: 3000,
-    hideClose: false,
-    bottom: 96,
-    severity: 'success'
-  }
-};
-
-export const Icon: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleClose = () => setIsOpen(false);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Snackbar</Button>
-        <Snackbar
-          open={isOpen}
-          onClose={handleClose}
-          icon={<SvgIcon name="AlarmLine" />}
-          variant={props?.variant}
-          hideClose={props?.hideClose}
-          transitionDuration={props?.transitionDuration}
-          autoHideDuration={props?.autoHideDuration}
-          bottom={props?.bottom}
-          severity={props?.severity}
-        >
-          Snackbar
-        </Snackbar>
-      </>
-    );
-  },
-  args: {
-    open: false,
-    variant: 'primary',
-    transitionDuration: 200,
-    autoHideDuration: 3000,
-    hideClose: false,
-    bottom: 96
-  }
-};
-
-export const Action: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleClose = () => setIsOpen(false);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Snackbar</Button>
-        <Snackbar
-          open={isOpen}
-          onClose={handleClose}
-          variant={props?.variant}
-          hideClose={props?.hideClose}
-          transitionDuration={props?.transitionDuration}
-          autoHideDuration={props?.autoHideDuration}
-          bottom={props?.bottom}
-          severity={props?.severity}
-          action={
-            <Button
-              size="small"
-              startAdornment={<SvgIcon name="AlarmLine" />}
-              onClick={handleClose}
-            >
-              알림 설정
-            </Button>
-          }
-        >
-          Snackbar
-        </Snackbar>
-      </>
-    );
-  },
-  args: {
-    open: false,
-    variant: 'primary',
-    transitionDuration: 200,
-    autoHideDuration: 3000,
-    hideClose: false,
-    bottom: 96
-  }
-};
-
-export const LineClamp: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleClose = () => setIsOpen(false);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Snackbar</Button>
-        <Snackbar
-          open={isOpen}
-          onClose={handleClose}
-          variant={props?.variant}
-          hideClose={props?.hideClose}
-          transitionDuration={props?.transitionDuration}
-          autoHideDuration={props?.autoHideDuration}
-          bottom={props?.bottom}
-          severity={props?.severity}
-        >
-          Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar
-          Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar
-          Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar
-          Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar
-          Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar
-          Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar Two-line Snackbar
-        </Snackbar>
-      </>
-    );
-  },
-  args: {
-    open: false,
-    variant: 'primary',
-    transitionDuration: 200,
-    autoHideDuration: 3000,
-    hideClose: false,
-    bottom: 96
-  }
-};
-
-export const InContainer: Story = {
-  render: (props) => {
-    const {
-      palette: { grey }
-    } = useTheme();
-
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenInContainer, setIsOpenInContainer] = useState(false);
-
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleClose = () => setIsOpen(false);
-
-    const handleOpenInContainer = () => setIsOpenInContainer((prevState) => !prevState);
-
-    const handleCloseInContainer = () => setIsOpenInContainer(false);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Flexbox gap={10}>
-        <Flexbox p={5} alignItems="center" justifyContent="center">
-          <Button onClick={handleOpen}>Open Snackbar</Button>
-          <Snackbar
-            open={isOpen}
-            onClose={handleClose}
-            variant={props?.variant}
-            hideClose={props?.hideClose}
-            transitionDuration={props?.transitionDuration}
-            autoHideDuration={props?.autoHideDuration}
-            bottom={props?.bottom}
-            severity={props?.severity}
-          >
-            Snackbar
-          </Snackbar>
-        </Flexbox>
-        <Flexbox
-          ref={containerRef}
-          p={5}
-          alignItems="center"
-          justifyContent="center"
-          inlineCSS={{
-            width: 320,
-            height: 500,
-            backgroundColor: grey['20']
-          }}
-        >
-          <Button onClick={handleOpenInContainer}>Open Snackbar In Container</Button>
-          <Snackbar
-            open={isOpenInContainer}
-            onClose={handleCloseInContainer}
-            variant={props?.variant}
-            hideClose={props?.hideClose}
-            transitionDuration={props?.transitionDuration}
-            autoHideDuration={props?.autoHideDuration}
-            bottom={props?.bottom}
-            severity={props?.severity}
-            containerRef={containerRef}
-          >
-            Snackbar
-          </Snackbar>
-        </Flexbox>
-      </Flexbox>
-    );
-  },
-  args: {
-    open: false,
-    variant: 'primary',
-    transitionDuration: 200,
-    autoHideDuration: 3000,
-    hideClose: false,
-    bottom: 96
-  }
-};

package/components/Snackbar/Snackbar.styles.ts

@@ -1,138 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { SnackbarProps } from './Snackbar';
-
-export const StyledSnackbar = styled.div<
-  Pick<SnackbarProps, 'open' | 'bottom' | 'variant' | 'transitionDuration' | 'hideClose'> & {
-    hasContainer: boolean;
-    containerTop: number;
-    containerLeft: number;
-    containerWidth: number;
-  }
->`
-  position: fixed;
-  bottom: ${'var(--system-navigation-bar-height, 0px)'};
-
-  ${({
-    theme: { spacing },
-    hasContainer,
-    containerTop,
-    containerLeft,
-    containerWidth
-  }): CSSObject | null => {
-    if (hasContainer) {
-      return {
-        left: containerLeft,
-        bottom: containerTop,
-        // 32: 좌우 너비
-        width: containerWidth - spacing.layout(4)
-      };
-    }
-
-    return {
-      left: 0,
-      width: 'calc(100% - 32px)'
-    };
-  }};
-
-  margin: 0 ${({ theme: { spacing } }) => spacing.content(4)}px;
-  padding: ${({ theme: { spacing } }) => spacing.content(4)}px;
-  display: flex;
-  align-items: center;
-  gap: ${({ theme: { spacing } }) => spacing.content(2)}px;
-  border-radius: 100px;
-  box-shadow: ${({ theme: { elevation } }) => elevation['4']};
-  transition:
-    transform ${({ transitionDuration }) => transitionDuration}ms,
-    opacity ${({ transitionDuration = 0 }) => transitionDuration / 2}ms;
-  transform: scale(${({ open }) => (open ? 1 : 0.97)})
-    translate3d(0, -${({ bottom = 0 }) => bottom}px, 0);
-  opacity: ${({ open }) => (open ? 1 : 0)};
-  z-index: 100004;
-
-  ${({
-    theme: {
-      palette: { grey, background }
-    },
-    variant
-  }): CSSObject => {
-    const cssObject: CSSObject = {
-      backgroundColor: grey['90']
-    };
-
-    if (variant === 'secondary') {
-      cssObject.backgroundColor = background.primary;
-    }
-
-    return cssObject;
-  }}
-`;
-
-export const Content = styled.div<
-  Pick<SnackbarProps, 'variant'> & {
-    hasIcon: boolean;
-  }
->`
-  flex-grow: 1;
-
-  display: -webkit-box;
-  overflow: hidden;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-
-  ${({ hasIcon }): CSSObject | null => (!hasIcon ? { marginLeft: 4 } : null)};
-
-  ${({
-    theme: {
-      palette: { grey },
-      typography: { b2M }
-    },
-    variant
-  }): CSSObject => {
-    const cssObject: CSSObject = {
-      fontSize: b2M.size,
-      fontWeight: b2M.weight,
-      letterSpacing: b2M.letterSpacing,
-      lineHeight: b2M.lineHeight,
-      color: grey.white
-    };
-
-    if (variant === 'secondary') {
-      cssObject.color = grey['100'];
-    }
-
-    return cssObject;
-  }}
-`;
-
-export const IconWrapper = styled.div`
-  white-space: nowrap;
-`;
-
-export const Closer = styled.div<Pick<SnackbarProps, 'variant'>>`
-  margin: -8px -8px -8px 0;
-
-  ${({
-    theme: {
-      palette: { grey }
-    },
-    variant
-  }): CSSObject => {
-    let cssObject: CSSObject = {
-      '& svg': {
-        color: grey.white
-      }
-    };
-
-    if (variant === 'secondary') {
-      cssObject = {
-        '& svg': {
-          color: 'inherit'
-        }
-      };
-    }
-
-    return cssObject;
-  }}
-`;