@dotss/ui 0.0.6 → 0.0.8

package/components/Tab/Tab.styles.ts

@@ -1,48 +0,0 @@
-import styled from '@emotion/styled';
-
-import type { TabProps } from '@components/Tab/Tab';
-
-export const StyledTabWrapper = styled.div<Pick<TabProps, 'scrollable'>>`
-  width: 100%;
-  background-color: ${({ theme }) => theme.palette.grey.white};
-  ${({ scrollable }) => {
-    if (scrollable) {
-      return {
-        overflow: 'hidden'
-      };
-    }
-    return {};
-  }}
-`;
-
-export const StyledTabBlocks = styled.div<{ isChipped: boolean }>`
-  display: flex;
-  position: relative;
-  background: ${({ theme }) => theme.palette.grey.white};
-  ${({ theme, isChipped }) => {
-    if (isChipped) {
-      return {
-        gap: theme.spacing.content(2)
-      };
-    }
-    return {};
-  }}
-`;
-
-export const StyledIndicator = styled.div<Pick<TabProps, 'disabled'> & { isChipped: boolean }>`
-  position: absolute;
-  height: 2px;
-  bottom: 0;
-  background: ${({ theme, disabled }) =>
-    disabled ? theme.palette.brand.primary.disableLine : theme.palette.brand.primary.main};
-  transition: all 0.2s ease-in-out;
-  transition-property: transform, width;
-  ${({ isChipped }) => {
-    if (isChipped) {
-      return {
-        display: 'none'
-      };
-    }
-    return {};
-  }}
-`;

package/components/Tab/Tab.tsx

@@ -1,316 +0,0 @@
-import type { HTMLAttributes, MouseEvent, TouchEvent, KeyboardEvent, ReactNode } from 'react';
-import {
-  Children,
-  cloneElement,
-  forwardRef,
-  isValidElement,
-  useEffect,
-  useRef,
-  useState
-} from 'react';
-
-import type { ChipProps } from '@components/Chip/Chip';
-import { StyledIndicator, StyledTabBlocks, StyledTabWrapper } from '@components/Tab/Tab.styles';
-import type { TabBlockProps } from '@components/Tab/TabBlock/TabBlock';
-import type { GeneralComponentProps, Size } from '@typings/component';
-
-export interface TabProps
-  extends GeneralComponentProps<Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>> {
-  value: string;
-  onChange: (value: string, target: EventTarget & HTMLDivElement) => void;
-  size?: Extract<Size, 'medium' | 'small'>;
-  scrollable?: boolean;
-  disabled?: boolean;
-  wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
-}
-
-const SCROLL_THRESHOLD = 3;
-
-// TODO: 모멘텀 스크롤링 구현
-const Tab = forwardRef<HTMLDivElement, TabProps>(function Tab(
-  {
-    value,
-    scrollable = false,
-    disabled = false,
-    onChange,
-    size = 'medium',
-    inlineCSS,
-    wrapperProps,
-    children,
-    ...props
-  },
-  ref
-) {
-  const tabBlocksRef = useRef<HTMLDivElement>(null);
-  const animationFrameRef = useRef<ReturnType<typeof requestAnimationFrame>>();
-  const scrollPositionRef = useRef(0);
-  const isDraggingEndRef = useRef(true);
-  const isMereClick = useRef(false);
-  const isMountedRef = useRef(false);
-
-  const [isDragging, setIsDragging] = useState(false);
-  const [isDisabledTab, setIsDisabledTab] = useState(false);
-  const [startDragX, setStartDragX] = useState(0);
-  const [startDragScrollPosition, setStartDragScrollPosition] = useState(0);
-
-  const disabledAll = disabled;
-  const isChipped = Children.toArray(children).every((child) => {
-    return (
-      isValidElement<TabBlockProps>(child) &&
-      Children.toArray(child.props.children).every(
-        (nestedChild) =>
-          isValidElement<ChipProps>(nestedChild) && !Array.isArray(nestedChild.props.children)
-      )
-    );
-  });
-
-  const handleClickTab = (newValue: string) => (e: MouseEvent<HTMLDivElement>) => {
-    if (!isMereClick.current) return;
-    onChange(newValue, e.currentTarget);
-    isMereClick.current = false;
-  };
-
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
-    if (!tabBlocksRef.current) return;
-
-    const tabs = tabBlocksRef.current.querySelectorAll<HTMLDivElement>(
-      '[role="tab"]:not([disabled])'
-    );
-    const currentIndex = Array.from(tabs).findIndex((tab) => tab === document.activeElement);
-
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      const prevIndex = currentIndex <= 0 ? tabs.length - 1 : currentIndex - 1;
-      const prevTab = tabs[prevIndex];
-      if (prevTab && !prevTab.getAttribute('disabled')) {
-        prevTab.focus();
-      }
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault();
-      const nextIndex = currentIndex >= tabs.length - 1 ? 0 : currentIndex + 1;
-      const nextTab = tabs[nextIndex];
-      if (nextTab && !nextTab.getAttribute('disabled')) {
-        nextTab.focus();
-      }
-    } else if (e.key === 'Home') {
-      e.preventDefault();
-      const firstTab = tabs[0];
-      if (firstTab && !firstTab.getAttribute('disabled')) {
-        firstTab.focus();
-      }
-    } else if (e.key === 'End') {
-      e.preventDefault();
-      const lastTab = tabs[tabs.length - 1];
-      if (lastTab && !lastTab.getAttribute('disabled')) {
-        lastTab.focus();
-      }
-    } else if (e.key === ' ' || e.key === 'Enter') {
-      e.preventDefault();
-      const currentTab = tabs[currentIndex];
-      if (currentTab && !currentTab.getAttribute('disabled')) {
-        const value = currentTab.getAttribute('value');
-        if (value) {
-          onChange(value, currentTab);
-
-          const indicator = tabBlocksRef.current.querySelector<HTMLDivElement>('.indicator');
-          if (indicator) {
-            indicator.style.width = `${currentTab.clientWidth}px`;
-            indicator.style.transform = `translate3d(${currentTab.offsetLeft}px, 0px, 0px)`;
-            if (isMountedRef.current) {
-              indicator.style.transition = 'all 0.2s ease-in-out';
-            } else {
-              indicator.style.transition = 'unset';
-              isMountedRef.current = true;
-            }
-          }
-        }
-      }
-    }
-  };
-
-  const handleStart = (clientX: number) => {
-    setIsDragging(true);
-    setStartDragX(clientX);
-    setStartDragScrollPosition(scrollPositionRef.current);
-  };
-
-  const handleEnd = (clientX?: number) => {
-    if (!isDragging) return;
-    setIsDragging(false);
-
-    if (clientX && Math.abs(startDragX - clientX) < SCROLL_THRESHOLD) {
-      isMereClick.current = true;
-    }
-
-    if (animationFrameRef.current) {
-      cancelAnimationFrame(animationFrameRef.current);
-      animationFrameRef.current = undefined;
-    }
-  };
-
-  const handleMouseDown = (event: MouseEvent<HTMLDivElement>) => handleStart(event.clientX);
-
-  const handleTouchStart = (event: TouchEvent<HTMLDivElement>) => {
-    handleStart(event.touches[0].clientX);
-  };
-
-  const handleTouchEnd = () => {
-    handleEnd();
-  };
-
-  const handleMouseEnd = (event: MouseEvent<HTMLDivElement>) => handleEnd(event.clientX);
-
-  useEffect(() => {
-    const handleScroll = () => {
-      if (tabBlocksRef.current) {
-        const indicator = tabBlocksRef.current.querySelector<HTMLDivElement>('.indicator');
-        const tab = tabBlocksRef.current?.querySelectorAll<HTMLDivElement>(
-          '[role="tab"][data-selected="true"]'
-        )[0];
-        if (tab && indicator) {
-          indicator.style.width = `${tab.clientWidth}px`;
-          indicator.style.transform = `translate3d(${tab.offsetLeft}px, 0px, 0px)`;
-          if (isMountedRef.current) {
-            indicator.style.transition = 'all 0.2s ease-in-out';
-          } else {
-            indicator.style.transition = 'unset';
-            isMountedRef.current = true;
-          }
-
-          setIsDisabledTab(tab.getAttribute('data-disabled') === 'true');
-        }
-
-        if (tab && scrollable) {
-          const tabStart = tab.offsetLeft;
-          const tabEnd = tab.offsetLeft + tab.clientWidth;
-          const viewStart = scrollPositionRef.current;
-          const viewEnd = scrollPositionRef.current + tabBlocksRef.current.clientWidth;
-
-          if (tabStart < viewStart || tabEnd > viewEnd) {
-            const newPosition = Math.min(
-              tabStart,
-              Math.max(
-                tabBlocksRef.current.scrollWidth - tabBlocksRef.current.clientWidth,
-                tabBlocksRef.current.scrollWidth - viewEnd
-              )
-            );
-            tabBlocksRef.current.style.transition = 'all 0.2s ease-in-out';
-            tabBlocksRef.current.style.transform = `translate3d(-${newPosition}px, 0px, 0px)`;
-            scrollPositionRef.current = newPosition;
-          }
-        }
-      }
-    };
-
-    handleScroll();
-
-    window.addEventListener('resize', handleScroll);
-
-    return () => {
-      window.removeEventListener('resize', handleScroll);
-    };
-  }, [scrollable, value, size]);
-
-  useEffect(() => {
-    const tabBlocksElement = tabBlocksRef.current;
-
-    const handleMove = (clientX: number) => {
-      if (!isDragging) return;
-      if (!tabBlocksRef.current) return;
-
-      const deltaX = startDragX - clientX;
-      let newScrollPosition = startDragScrollPosition + deltaX;
-      const maxScrollPosition = tabBlocksRef.current.scrollWidth - tabBlocksRef.current.clientWidth;
-
-      if (newScrollPosition < 0) {
-        newScrollPosition = 0;
-      } else if (newScrollPosition > maxScrollPosition) {
-        newScrollPosition = maxScrollPosition;
-      }
-
-      if (tabBlocksRef.current) {
-        if (animationFrameRef.current) {
-          cancelAnimationFrame(animationFrameRef.current);
-        }
-        animationFrameRef.current = requestAnimationFrame(() => {
-          if (!tabBlocksRef.current) return;
-          tabBlocksRef.current.style.transition = 'unset';
-          tabBlocksRef.current.style.transform = `translate3d(-${newScrollPosition}px, 0px, 0px)`;
-          scrollPositionRef.current = newScrollPosition;
-          isDraggingEndRef.current = false;
-        });
-      }
-    };
-
-    const handleMouseMove = (event: globalThis.MouseEvent) => {
-      event.stopPropagation();
-      handleMove(event.clientX);
-    };
-
-    const handleTouchMove = (event: globalThis.TouchEvent) => {
-      event.stopPropagation();
-      handleMove(event.touches[0].clientX);
-    };
-
-    tabBlocksElement?.addEventListener('mousemove', handleMouseMove);
-    tabBlocksElement?.addEventListener('touchmove', handleTouchMove);
-
-    return () => {
-      tabBlocksElement?.removeEventListener('mousemove', handleMouseMove);
-      tabBlocksElement?.removeEventListener('touchmove', handleTouchMove);
-    };
-  }, [isDragging, startDragX, startDragScrollPosition]);
-
-  return (
-    <StyledTabWrapper
-      className="tab-wrapper"
-      ref={ref}
-      scrollable={scrollable}
-      {...wrapperProps}
-      css={wrapperProps?.inlineCSS}
-    >
-      <StyledTabBlocks
-        className="tab-list"
-        role="tablist"
-        ref={tabBlocksRef}
-        isChipped={isChipped}
-        css={inlineCSS}
-        {...props}
-        onMouseDown={handleMouseDown}
-        onMouseUp={handleMouseEnd}
-        onMouseLeave={handleMouseEnd}
-        onTouchStart={handleTouchStart}
-        onTouchEnd={handleTouchEnd}
-        onTouchCancel={handleTouchEnd}
-      >
-        {Children.map(children, (child, index) => {
-          if (!isValidElement<TabBlockProps>(child)) {
-            return null;
-          }
-
-          const isSelected = value === child.props.value;
-          const isDisabled = disabledAll || child.props?.disabled;
-
-          return cloneElement(child, {
-            ...child.props,
-            className: `tab-block-${index}`,
-            selected: isSelected,
-            'aria-selected': isSelected,
-            tabIndex: isSelected ? 0 : -1,
-            onClick: !child.props?.disabled ? handleClickTab(child.props.value) : undefined,
-            onKeyDown: handleKeyDown,
-            disabled: isDisabled,
-            size
-          });
-        })}
-        <StyledIndicator
-          className="indicator"
-          disabled={disabledAll || isDisabledTab}
-          isChipped={isChipped}
-        />
-      </StyledTabBlocks>
-    </StyledTabWrapper>
-  );
-});
-
-export default Tab;

package/components/Tab/TabBlock/TabBlock.styles.ts

@@ -1,53 +0,0 @@
-import styled from '@emotion/styled';
-
-import type { TabBlockProps } from '@components/Tab/TabBlock/TabBlock';
-
-export const StyledTabBlock = styled.div<Pick<TabBlockProps, 'size' | 'selected' | 'disabled'>>`
-  display: flex;
-  flex: 1;
-  justify-content: center;
-  align-items: center;
-  padding: ${({ theme: { spacing }, size }) => {
-    if (size === 'small') {
-      return `${spacing.content(2)}px ${spacing.content(3)}px`;
-    }
-
-    return `${spacing.content(3)}px ${spacing.content(4)}px`;
-  }};
-  border-bottom: ${({ theme }) => `1px solid ${theme.palette.grey['10']}`};
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
-
-  ${({ theme: { typography, palette }, size, selected, disabled }) => {
-    if (selected) {
-      const {
-        size: fontSize,
-        weight: fontWeight,
-        lineHeight,
-        letterSpacing
-      } = typography[size === 'medium' ? 'h4B' : 'h5B'];
-
-      return {
-        fontSize,
-        fontWeight,
-        lineHeight,
-        letterSpacing,
-        color: disabled ? palette.grey['30'] : palette.grey['100']
-      };
-    }
-
-    const {
-      size: fontSize,
-      weight: fontWeight,
-      lineHeight,
-      letterSpacing
-    } = typography[size === 'medium' ? 'b2R' : 'b4R'];
-
-    return {
-      fontSize,
-      fontWeight,
-      lineHeight,
-      letterSpacing,
-      color: disabled ? palette.grey['30'] : palette.grey['70']
-    };
-  }}}
-`;

package/components/Tab/TabBlock/TabBlock.tsx

@@ -1,67 +0,0 @@
-import type { HTMLAttributes, MouseEvent } from 'react';
-import { Children, forwardRef, isValidElement } from 'react';
-
-import Chip from '@components/Chip';
-import type { ChipProps } from '@components/Chip/Chip';
-import type { TabProps } from '@components/Tab/Tab';
-import type { GeneralComponentProps } from '@typings/component';
-
-import { StyledTabBlock } from './TabBlock.styles';
-
-export interface TabBlockProps
-  extends GeneralComponentProps<HTMLAttributes<HTMLDivElement> & Pick<TabProps, 'size'>> {
-  value: string;
-  selected?: boolean;
-  disabled?: boolean;
-  onClick?: (e: MouseEvent<HTMLDivElement>) => void;
-}
-
-const TabBlock = forwardRef<HTMLDivElement, TabBlockProps>(function TabBlock(
-  { size = 'medium', selected, disabled = false, inlineCSS, children, onClick, ...props },
-  ref
-) {
-  return (
-    <>
-      {Children.map(children, (child) => {
-        if (isValidElement<ChipProps>(child) && !Array.isArray(child?.props?.children)) {
-          return (
-            <Chip
-              tag="button"
-              role="tab"
-              ref={ref}
-              data-shape="chip"
-              data-selected={selected}
-              disabled={disabled}
-              variant={selected ? 'filled' : 'outlined'}
-              selected={selected}
-              onClick={onClick}
-              inlineCSS={inlineCSS}
-              {...child.props}
-              {...props}
-            />
-          );
-        }
-
-        return (
-          <StyledTabBlock
-            as="button"
-            role="tab"
-            ref={ref}
-            size={size}
-            disabled={disabled}
-            selected={selected}
-            data-selected={selected}
-            data-disabled={disabled}
-            onClick={onClick}
-            css={inlineCSS}
-            {...props}
-          >
-            {child}
-          </StyledTabBlock>
-        );
-      })}
-    </>
-  );
-});
-
-export default TabBlock;

package/components/Tab/TabBlock/index.ts

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

package/components/Tab/index.ts

@@ -1,4 +0,0 @@
-import Tab from './Tab';
-
-export { default as TabBlock } from './TabBlock';
-export default Tab;

package/components/TextArea/TextArea.stories.tsx

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Box from '@components/Box';
-
-import TextArea from './TextArea';
-
-const meta = {
-  title: 'Component/TextArea',
-  component: TextArea,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    helper: {
-      control: {
-        disable: true
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof TextArea>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Outlined: Story = {
-  args: {
-    value: '',
-    variant: 'outlined',
-    size: 'large',
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};
-
-export const Filled: Story = {
-  args: {
-    value: '',
-    variant: 'filled',
-    size: 'large',
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};
-
-export const FullWidth: Story = {
-  decorators: [
-    (Story) => (
-      <Box
-        inlineCSS={{
-          width: '100vh'
-        }}
-      >
-        <Story />
-      </Box>
-    )
-  ],
-  args: {
-    value: '',
-    variant: 'outlined',
-    size: 'large',
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};
-
-export const Small: Story = {
-  args: {
-    value: '',
-    variant: 'outlined',
-    size: 'small',
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};
-
-export const Success: Story = {
-  args: {
-    value: '',
-    variant: 'outlined',
-    size: 'large',
-    helper: {
-      severity: 'success'
-    },
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};
-
-export const Error: Story = {
-  args: {
-    value: '',
-    variant: 'outlined',
-    size: 'large',
-    helper: {
-      severity: 'error',
-      message: 'Error Message'
-    },
-    disabled: false,
-    placeholder: 'placeholder'
-  }
-};