@dotss/ui 0.0.6 → 0.0.8

package/components/Card/Card.stories.tsx

@@ -1,87 +0,0 @@
-import { useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Card from './Card';
-
-const meta = {
-  title: 'Component/Card',
-  component: Card,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    variant: {
-      options: ['filled', 'outlined'],
-      control: {
-        type: 'radio'
-      }
-    },
-    appearance: {
-      options: ['kiosk', 'mobile'],
-      control: {
-        type: 'radio'
-      }
-    },
-    wrapperProps: {
-      control: {
-        disable: true
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Card>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// TODO: 명칭 변경 필요
-export const Kiosk: Story = {
-  args: {
-    children: 'CARD',
-    variant: 'filled',
-    disabled: false,
-    active: false,
-    appearance: 'kiosk',
-    wrapperProps: {}
-  }
-};
-
-export const Mobile: Story = {
-  args: {
-    children: 'CARD',
-    variant: 'filled',
-    disabled: false,
-    active: false,
-    appearance: 'mobile',
-    wrapperProps: {}
-  }
-};
-
-export const Toggled: Story = {
-  render: (props) => {
-    const [isSelected, setIsSelected] = useState(false);
-
-    const handleClick = () => {
-      setIsSelected((prev) => !prev);
-    };
-
-    return (
-      <Card
-        {...props}
-        variant={isSelected ? 'outlined' : 'filled'}
-        active={isSelected}
-        onClick={handleClick}
-        inlineCSS={{ cursor: 'pointer' }}
-      >
-        {props.children}
-      </Card>
-    );
-  },
-  args: {
-    children: 'CARD',
-    variant: 'filled',
-    active: false,
-    appearance: 'kiosk'
-  }
-};

package/components/Card/Card.styles.ts

@@ -1,146 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { CardProps } from '@components/Card/Card';
-
-export const StyledCard = styled.div<
-  Pick<CardProps, 'variant' | 'disabled' | 'active' | 'appearance'> & { isHoverPossible: boolean }
->`
-  display: flex;
-  flex-direction: column;
-  color: ${({ theme }) => theme.palette.grey['100']};
-  &[disabled] {
-    pointer-events: none;
-  }
-
-  ${({ theme: { spacing }, appearance, variant }): CSSObject => {
-    if (appearance === 'kiosk') {
-      let cssObject = {
-        padding: `${spacing.content(8)}px ${spacing.content(6)}px`,
-        gap: spacing.content(2),
-        borderRadius: 20,
-        borderWidth: 4,
-        borderStyle: 'solid'
-      };
-      if (variant === 'outlined') {
-        cssObject = {
-          ...cssObject,
-          padding: `calc(${spacing.content(8) - 4}px) calc(${spacing.content(6) - 4}px)`
-        };
-      }
-      return cssObject;
-    }
-    if (appearance === 'mobile') {
-      let cssObject = {
-        padding: `${spacing.content(4)}px`,
-        gap: spacing.content(1),
-        borderRadius: 12,
-        borderWidth: 2,
-        borderStyle: 'solid'
-      };
-      if (variant === 'outlined') {
-        cssObject = {
-          ...cssObject,
-          padding: `calc(${spacing.content(4) - 2}px)`
-        };
-      }
-      return cssObject;
-    }
-    return {};
-  }}
-
-  ${({
-    theme: {
-      palette: { brand, grey, background }
-    },
-    variant,
-    disabled,
-    active,
-    isHoverPossible
-  }): CSSObject => {
-    if (variant === 'outlined') {
-      if (!disabled && active) {
-        return {
-          borderColor: brand.primary.main,
-          backgroundColor: grey.white,
-          '&:active': {
-            backgroundColor: brand.primary.disable
-          },
-          ...(isHoverPossible ? { '&:hover': { backgroundColor: brand.primary.disable } } : {})
-        };
-      }
-      if (!disabled && !active) {
-        return {
-          borderWidth: 2,
-          borderColor: grey['30'],
-          backgroundColor: grey.white,
-          '&:active': {
-            backgroundColor: grey['10']
-          },
-          ...(isHoverPossible ? { '&:hover': { backgroundColor: grey['10'] } } : {})
-        };
-      }
-      if (disabled && active) {
-        return {
-          borderColor: brand.primary.disableLine,
-          backgroundColor: brand.primary.disable
-        };
-      }
-      if (disabled && !active) {
-        return {
-          borderWidth: 2,
-          borderColor: grey['30'],
-          backgroundColor: grey['10']
-        };
-      }
-    }
-    if (variant === 'filled') {
-      if (!disabled && active) {
-        return {
-          border: 'none',
-          backgroundColor: brand.primary.main,
-          '&:active': {
-            backgroundColor: brand.primary.press
-          },
-          ...(isHoverPossible ? { '&:hover': { backgroundColor: brand.primary.press } } : {})
-        };
-      }
-      if (!disabled && !active) {
-        return {
-          border: 'none',
-          backgroundColor: background.primary,
-          '&:active': {
-            backgroundColor: grey['10']
-          },
-          ...(isHoverPossible ? { '&:hover': { backgroundColor: grey['10'] } } : {})
-        };
-      }
-      if (disabled && active) {
-        return {
-          border: 'none',
-          backgroundColor: brand.primary.disable
-        };
-      }
-      if (disabled && !active) {
-        return {
-          border: 'none',
-          backgroundColor: grey['20']
-        };
-      }
-    }
-    return {};
-  }}
-
-  ${({ disabled }): CSSObject => {
-    if (disabled) {
-      return {};
-    }
-    return {};
-  }}
-`;
-
-export const StyledCardWrapper = styled.div<Pick<CardProps, 'disabled'>>`
-  &[disabled] {
-    cursor: not-allowed;
-  }
-`;

package/components/Card/Card.tsx

@@ -1,54 +0,0 @@
-import type { ElementType, HTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import { StyledCard, StyledCardWrapper } from '@components/Card/Card.styles';
-import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
-import type { GeneralComponentProps, PolymorphicComponentProps, Variant } from '@typings/component';
-
-export type CardProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T> & {
-  variant?: Extract<Variant, 'filled' | 'outlined'>;
-  active?: boolean;
-  disabled?: boolean;
-  appearance?: 'kiosk' | 'mobile'; // TODO: 명칭 변경 필요
-  wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
-};
-
-type CardComponent<DT extends ElementType> = <T extends ElementType = DT>(
-  props: CardProps<T>
-) => ReactNode;
-
-const Card: CardComponent<'div'> = forwardRef(function Card(
-  {
-    children,
-    tag,
-    inlineCSS,
-    variant = 'filled',
-    active = false,
-    disabled = false,
-    appearance = 'mobile',
-    wrapperProps = {},
-    ...props
-  },
-  ref
-) {
-  const { isHoverPossible } = useCheckHoverPossible();
-  return (
-    <StyledCardWrapper disabled={disabled} {...wrapperProps} css={wrapperProps?.inlineCSS}>
-      <StyledCard
-        as={tag}
-        variant={variant}
-        active={active}
-        disabled={disabled}
-        appearance={appearance}
-        isHoverPossible={isHoverPossible}
-        {...props}
-        css={inlineCSS}
-        ref={ref}
-      >
-        {children}
-      </StyledCard>
-    </StyledCardWrapper>
-  );
-});
-
-export default Card;

package/components/Card/index.ts

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

package/components/ChainPicker/ChainPicker.stories.tsx

@@ -1,120 +0,0 @@
-import { useEffect, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Flexbox, Typography } from '@components';
-
-import ChainPicker from './ChainPicker';
-
-const meta = {
-  title: 'Component/ChainPicker',
-  component: ChainPicker,
-  tags: ['autodocs']
-} satisfies Meta<typeof ChainPicker>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-
-    const handleChange = (newValue: number) => {
-      setValue(newValue);
-    };
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    return (
-      <Flexbox flexDirection="column" justifyContent="center" alignItems="center" gap={2}>
-        <Typography variant="h1B">[ Selected Value: {value} ]</Typography>
-        <ChainPicker column={props.column} onChange={handleChange} value={value} />
-      </Flexbox>
-    );
-  },
-  args: {
-    onChange: () => {},
-    column: [
-      { label: '남아', value: 0 },
-      { label: '여아', value: 1 }
-    ],
-    value: 0
-  }
-};
-
-export const Custom: Story = {
-  render: (props) => {
-    const [value, setValue] = useState(props.value);
-
-    const handleChange = (newValue: number) => {
-      setValue(newValue);
-    };
-
-    useEffect(() => {
-      setValue(props.value);
-    }, [props.value]);
-
-    return (
-      <Flexbox flexDirection="column" justifyContent="center" alignItems="center" gap={2}>
-        <Typography variant="h1B">[ Selected Value: {value} ]</Typography>
-        <ChainPicker
-          column={props.column}
-          onChange={handleChange}
-          value={value}
-          renderLabel={props.renderLabel}
-          wrapperProps={{ inlineCSS: { width: '100%' } }}
-        />
-      </Flexbox>
-    );
-  },
-  args: {
-    onChange: () => {},
-    column: [
-      { label: '07:00', value: 7 },
-      { label: '07:30', value: 7.5 },
-      { label: '08:00', value: 8 },
-      { label: '08:30', value: 8.5 },
-      { label: '09:00', value: 9 },
-      { label: '09:30', value: 9.5 },
-      { label: '10:00', value: 10 },
-      { label: '10:30', value: 10.5 },
-      { label: '11:00', value: 11 },
-      { label: '11:30', value: 11.5 },
-      { label: '12:00', value: 12 },
-      { label: '12:30', value: 12.5 },
-      { label: '13:00', value: 13 },
-      { label: '13:30', value: 13.5 },
-      { label: '14:00', value: 14 },
-      { label: '14:30', value: 14.5 },
-      { label: '15:00', value: 15 },
-      { label: '15:30', value: 15.5 },
-      { label: '16:00', value: 16 },
-      { label: '16:30', value: 16.5 },
-      { label: '17:00', value: 17 },
-      { label: '17:30', value: 17.5 },
-      { label: '18:00', value: 18 },
-      { label: '18:30', value: 18.5 },
-      { label: '19:00', value: 19 },
-      { label: '19:30', value: 19.5 },
-      { label: '20:00', value: 20 },
-      { label: '20:30', value: 20.5 },
-      { label: '21:00', value: 21 },
-      { label: '21:30', value: 21.5 }
-    ],
-    value: 7,
-    renderLabel: (item, isSelected) => {
-      return (
-        <Flexbox gap={1} alignItems="center" justifyContent="center">
-          <Typography tag="span" variant={isSelected ? 'h5M' : 'b5M'}>
-            {item.value < 12 ? '오전' : '오후'}
-          </Typography>
-          <Typography tag="span" variant={isSelected ? 'h2M' : 'h4M'}>
-            {item.label}
-          </Typography>
-        </Flexbox>
-      );
-    }
-  }
-};

package/components/ChainPicker/ChainPicker.styles.ts

@@ -1,88 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-export const StyledChainPicker = styled.ul`
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  overflow: hidden;
-  width: 100%;
-  height: 162px;
-  position: relative;
-  cursor: grab;
-  transition: transform 0.3s ease-out;
-`;
-
-export const StyledChainPickerWrapper = styled.div`
-  position: relative;
-  width: auto;
-  height: fit-content;
-  overflow: hidden;
-  &:after {
-    content: '';
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    transform: translateY(-100%);
-    background: linear-gradient(
-      0deg,
-      rgba(255, 255, 255, 1) 0%,
-      rgba(255, 255, 255, 0.6) 10%,
-      rgba(255, 255, 255, 0) 20%,
-      rgba(255, 255, 255, 0) 80%,
-      rgba(255, 255, 255, 0.6) 90%,
-      rgba(255, 255, 255, 1) 100%
-    );
-    pointer-events: none;
-  }
-`;
-
-export const StyledChainPickerItem = styled.li<{ selected: boolean; distance: number }>`
-  height: 54px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  scroll-snap-align: start;
-  position: relative;
-
-  ${({
-    theme: {
-      palette: { grey },
-      typography: { h2M },
-      spacing: { content }
-    }
-  }): CSSObject => ({
-    fontSize: h2M.size,
-    fontWeight: h2M.weight,
-    lineHeight: h2M.lineHeight,
-    letterSpacing: h2M.letterSpacing,
-    color: grey['100'],
-    padding: content(3)
-  })};
-
-  ${({
-    selected,
-    theme: {
-      palette: { grey },
-      typography: { h4M }
-    }
-  }) => {
-    if (selected) {
-      return {
-        '&, & *': {
-          color: `${grey['100']} !important`
-        }
-      };
-    }
-    return {
-      color: `${grey['30']} !important`,
-      fontSize: `${h4M.size} !important`,
-      fontWeight: `${h4M.weight} !important`,
-      lineHeight: `${h4M.lineHeight} !important`,
-      letterSpacing: `${h4M.letterSpacing} !important`,
-      '& *': {
-        color: `${grey['30']} !important`
-      }
-    };
-  }}
-`;

package/components/ChainPicker/ChainPicker.tsx

@@ -1,211 +0,0 @@
-import type { HTMLAttributes, MouseEvent, ReactNode, TouchEvent } from 'react';
-import { Fragment, forwardRef, useId, useLayoutEffect, useRef, useState } from 'react';
-
-import {
-  StyledChainPicker,
-  StyledChainPickerItem,
-  StyledChainPickerWrapper
-} from '@components/ChainPicker/ChainPicker.styles';
-import useCheckHoverPossible from '@hooks/useCheckHoverPossible/useCheckHoverPossible';
-import type { GeneralComponentProps } from '@typings/component';
-
-export const SCROLL_POSITION_THRESHOLD = 3;
-
-export interface ChainPickerItem {
-  label: string;
-  value: number;
-}
-
-export interface ChainPickerProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLUListElement>, 'onChange'>> {
-  column: ChainPickerItem[];
-  value?: number;
-  onChange: (selectedValue: number) => void;
-  renderLabel?: (item: ChainPickerItem, isSelected: boolean) => ReactNode;
-  wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
-}
-
-const ChainPicker = forwardRef<HTMLUListElement, ChainPickerProps>(function PickerWheel(
-  { column, value = column[0].value, onChange, renderLabel, inlineCSS, wrapperProps, ...props },
-  ref
-) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const itemHeight = 54;
-  const defaultIndex = column.findIndex((item) => item.value === value);
-  const [scrollPosition, setScrollPosition] = useState(defaultIndex * itemHeight);
-  const [isDragging, setIsDragging] = useState(false);
-  const [startDragScrollPosition, setStartDragScrollPosition] = useState(0);
-  const [startDragY, setStartDragY] = useState(0);
-  const id = useId();
-
-  const { isHoverPossible: isWeb } = useCheckHoverPossible();
-
-  const handleStart = (clientY: number) => {
-    setIsDragging(true);
-    setStartDragY(clientY);
-    setStartDragScrollPosition(scrollPosition);
-  };
-
-  const handleMove = (clientY: number) => {
-    if (!isDragging) return;
-    const deltaY = startDragY - clientY;
-    let newScrollPosition = startDragScrollPosition + deltaY;
-    const maxScrollPosition = itemHeight * (column.length - 1);
-
-    // 최소, 최대값 제한
-    if (newScrollPosition < 0) {
-      newScrollPosition = 0;
-    } else if (newScrollPosition > maxScrollPosition) {
-      newScrollPosition = maxScrollPosition;
-    }
-
-    setScrollPosition(newScrollPosition);
-    if (wrapperRef.current) {
-      wrapperRef.current.children[0].scrollTop = newScrollPosition;
-    }
-  };
-
-  const handleMouseDown = (event: MouseEvent<HTMLUListElement>) => handleStart(event.clientY);
-
-  const handleTouchStart = (event: TouchEvent<HTMLUListElement>) =>
-    handleStart(event.touches[0].clientY);
-
-  const handleMouseMove = (event: MouseEvent<HTMLUListElement>) => handleMove(event.clientY);
-
-  const handleTouchMove = (event: TouchEvent<HTMLUListElement>) =>
-    handleMove(event.touches[0].clientY);
-
-  const handleEnd = (e: MouseEvent | TouchEvent) => {
-    if (!isDragging) return;
-    setIsDragging(false);
-
-    // 클릭처럼 처리
-    if (!isWeb && e.type === 'mouseup') return;
-    if (Math.abs(startDragScrollPosition - scrollPosition) < SCROLL_POSITION_THRESHOLD) {
-      const target = e.target as HTMLElement;
-
-      const item = target.closest('[data-index]') as HTMLElement;
-      if (item) {
-        const index = Number(item.dataset.index);
-        if (column[index]) {
-          if (wrapperRef.current) {
-            const scrollContainer = wrapperRef.current.children[0] as HTMLElement;
-
-            scrollContainer.scrollTo({
-              top: index * itemHeight,
-              behavior: 'smooth'
-            });
-
-            const handleScrollEnd = () => {
-              if (Math.abs(scrollContainer.scrollTop - index * itemHeight) < 1) {
-                onChange(column[index].value);
-                scrollContainer.removeEventListener('scroll', handleScrollEnd);
-              }
-            };
-
-            scrollContainer.addEventListener('scroll', handleScrollEnd);
-          }
-        }
-      }
-      return;
-    }
-
-    let index = Math.round(scrollPosition / itemHeight);
-    let closestValue = index * itemHeight;
-    const maxScrollPosition = itemHeight * (column.length - 1);
-
-    if (closestValue < 0) {
-      closestValue = 0;
-      index = 0;
-    } else if (closestValue > maxScrollPosition) {
-      closestValue = maxScrollPosition;
-      index = column.length - 1;
-    }
-
-    const animateScroll = (currentValue: number) => {
-      if (Math.abs(currentValue - closestValue) < 1) {
-        setScrollPosition(closestValue);
-        if (wrapperRef.current) {
-          wrapperRef.current.children[0].scrollTop = closestValue;
-        }
-      } else {
-        const newValue = currentValue + (closestValue - currentValue) / 5;
-        setScrollPosition(newValue);
-        if (wrapperRef.current) {
-          wrapperRef.current.children[0].scrollTop = newValue;
-        }
-        requestAnimationFrame(() => animateScroll(newValue));
-      }
-    };
-
-    requestAnimationFrame(() => animateScroll(scrollPosition));
-
-    if (column[index]) {
-      onChange(column[index].value);
-    }
-  };
-
-  useLayoutEffect(() => {
-    const index = column.findIndex((item) => item.value === value);
-    const newScrollPosition = index * itemHeight;
-    setScrollPosition(newScrollPosition);
-    if (wrapperRef.current) {
-      wrapperRef.current.children[0].scrollTop = newScrollPosition;
-    }
-  }, [value, column, itemHeight]);
-
-  return (
-    <StyledChainPickerWrapper ref={wrapperRef} {...wrapperProps} css={wrapperProps?.inlineCSS}>
-      <StyledChainPicker
-        ref={ref}
-        css={inlineCSS}
-        {...props}
-        onMouseDown={handleMouseDown}
-        onMouseMove={handleMouseMove}
-        onMouseUp={handleEnd}
-        onMouseLeave={handleEnd}
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleEnd}
-        onTouchCancel={handleEnd}
-      >
-        {column.map((item, index) => {
-          const selectedPosition = column.findIndex((columnItem) => columnItem.value === value);
-          const scrollIndex = selectedPosition === 0 ? 0 : Math.round(scrollPosition / itemHeight);
-          const isSelected = index === scrollIndex;
-          return (
-            <Fragment key={`${id}_${item.label}`}>
-              {index === 0 && (
-                <StyledChainPickerItem
-                  className="chain-picker-item"
-                  data-index={index}
-                  selected={false}
-                  distance={(selectedPosition + 1) * -1}
-                />
-              )}
-              <StyledChainPickerItem
-                className="chain-picker-item"
-                data-index={index}
-                data-selected={isSelected}
-                selected={isSelected}
-                distance={index - selectedPosition}
-              >
-                {renderLabel ? renderLabel(item, isSelected) : item.label}
-              </StyledChainPickerItem>
-              {index === column.length - 1 && (
-                <StyledChainPickerItem
-                  className="chain-picker-item"
-                  data-index={index}
-                  selected={false}
-                  distance={column.length - selectedPosition}
-                />
-              )}
-            </Fragment>
-          );
-        })}
-      </StyledChainPicker>
-    </StyledChainPickerWrapper>
-  );
-});
-
-export default ChainPicker;