@kimdw-rtk/ui 0.0.0 → 0.0.3

package/src/components/ScrollArea/ScrollArea.tsx

@@ -1,68 +0,0 @@
-'use client';
-
-import { forwardRef, useEffect, useRef, useState } from 'react';
-
-import { useCombinedRefs } from '@kimdw-rtk/utils';
-import clsx from 'clsx';
-
-import { useMouseScroll } from '#hooks/useMouseScroll';
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './ScrollArea.css';
-
-type ScrollAreaProps = UIComponent<'div'>;
-
-export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
-  ({ children, className, sx: propSx, ...props }, ref) => {
-    const scrollAreaRef = useRef<HTMLDivElement>(null);
-    const targetRef = useCombinedRefs(ref, scrollAreaRef);
-    const [hasLeftSpace, setHasLeftSpace] = useState<boolean>(false);
-    const [hasRightSpace, setHasRightSpace] = useState<boolean>(true);
-    useMouseScroll(scrollAreaRef);
-
-    useEffect(() => {
-      const element = scrollAreaRef.current;
-
-      if (element === null) {
-        return;
-      }
-
-      const handleScroll = () => {
-        setHasLeftSpace(element.scrollLeft !== 0);
-        setHasRightSpace(
-          Math.round(element.scrollLeft + element.clientWidth) <
-            element.scrollWidth,
-        );
-      };
-
-      handleScroll();
-
-      element.addEventListener('scroll', handleScroll);
-
-      return () => {
-        element.removeEventListener('scroll', handleScroll);
-      };
-    }, []);
-
-    return (
-      <div
-        ref={targetRef}
-        className={clsx(
-          s.scrollArea,
-          className,
-          sx(propSx),
-          hasLeftSpace && hasRightSpace && s.maskBoth,
-          hasLeftSpace && s.maskLeft,
-          hasRightSpace && s.maskRight,
-        )}
-        {...props}
-      >
-        <div className={s.wrapper}>{children}</div>
-      </div>
-    );
-  },
-);
-ScrollArea.displayName = 'ScrollArea';
-
-export { s as scrollAreaCss };

package/src/components/Select/Select.css.ts

@@ -1,22 +0,0 @@
-import { recipeWithLayer } from '#styleUtils';
-import { typography } from '#tokens';
-
-export const select = recipeWithLayer({
-  base: {
-    position: 'relative',
-  },
-
-  variants: {
-    size: {
-      sm: {
-        fontSize: typography.size.sm,
-      },
-      md: {
-        fontSize: typography.size.md,
-      },
-      lg: {
-        fontSize: typography.size.lg,
-      },
-    },
-  },
-});

package/src/components/Select/Select.spec.tsx

@@ -1,65 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-
-import { Select, SelectOption } from '.';
-import { uiTest } from '../../tests/uiTest';
-
-describe('Select 컴포넌트', () => {
-  uiTest(Select, 'Select');
-
-  it('클릭한 option의 내용이 Select에 보인다.', () => {
-    render(
-      <Select data-testid="select">
-        <SelectOption value="1">1번</SelectOption>
-        <SelectOption value="2">2번</SelectOption>
-      </Select>,
-    );
-
-    const select = screen.getByTestId('select');
-
-    fireEvent.click(screen.getByText('2번'));
-    expect(select).toHaveTextContent('2번');
-  });
-
-  it('새로운 option을 클릭하면 onChange 이벤트가 발생하고, form value, ref.value의 값이 바뀐다.', () => {
-    const handleChange = jest.fn();
-
-    render(
-      <form data-testid="form">
-        <Select data-testid="select" name="select" onChange={handleChange}>
-          <SelectOption value="1">1번</SelectOption>
-          <SelectOption value="2">2번</SelectOption>
-        </Select>
-      </form>,
-    );
-
-    const option2 = screen.getByText('2번');
-    const form = screen.getByTestId('form') as HTMLFormElement;
-
-    fireEvent.click(option2);
-    expect(handleChange).toHaveBeenCalledTimes(1);
-    expect(handleChange.mock.calls[0][0]).toBe('2');
-    expect(new FormData(form).get('select')).toBe('2');
-
-    fireEvent.click(option2);
-    expect(handleChange).toHaveBeenCalledTimes(1);
-    expect(new FormData(form).get('select')).toBe('2');
-
-    fireEvent.click(screen.getByText('1번'));
-    expect(handleChange).toHaveBeenCalledTimes(2);
-    expect(handleChange.mock.calls[1][0]).toBe('1');
-    expect(new FormData(form).get('select')).toBe('1');
-  });
-
-  it('defaultValue의 값이 기본으로 보인다.', () => {
-    render(
-      <Select data-testid="select" defaultValue="2">
-        <SelectOption value="1">1번</SelectOption>
-        <SelectOption value="2">2번</SelectOption>
-      </Select>,
-    );
-
-    const select = screen.getByTestId('select');
-
-    expect(select).toHaveTextContent('2번');
-  });
-});

package/src/components/Select/Select.tsx

@@ -1,111 +0,0 @@
-'use client';
-
-import {
-  forwardRef,
-  useEffect,
-  useReducer,
-  useRef,
-  type ComponentProps,
-  type CSSProperties,
-  type RefObject,
-} from 'react';
-
-import { useCombinedRefs } from '@kimdw-rtk/utils';
-import clsx from 'clsx';
-
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './Select.css';
-import { SelectContext, selectReducer } from './SelectContext';
-import SelectOptionList from './SelectOptionList';
-import SelectTrigger from './SelectTrigger';
-
-interface SelectProps
-  extends Omit<UIComponent<'div', typeof s.select>, 'ref' | 'onChange'> {
-  ref?: RefObject<{ value?: string } | null>;
-  name?: string;
-  width?: CSSProperties['width'];
-  defaultValue?: string;
-  variant?: ComponentProps<typeof SelectTrigger>['variant'];
-  onChange?: (value: string | undefined) => void;
-}
-
-export const Select = forwardRef<HTMLDivElement, SelectProps>(
-  (
-    {
-      children,
-      className,
-      style,
-      name,
-      defaultValue,
-      width = '100%',
-      size = 'md',
-      sx: propSx,
-      variant = 'outlined',
-      onChange,
-      ...props
-    },
-    ref,
-  ) => {
-    const containerRef = useRef<HTMLDivElement>(null);
-    const targetRef = useCombinedRefs(ref, containerRef);
-    const [state, dispatch] = useReducer(selectReducer, {
-      isActive: false,
-      containerRef,
-      defaultValue,
-      items: new Map(),
-    });
-
-    useEffect(() => {
-      const container = containerRef.current;
-
-      if (!container) {
-        return;
-      }
-
-      const handleOutsideClick = (e: MouseEvent) => {
-        if (container.contains(e.target as Node) || !state.isActive) {
-          return;
-        }
-
-        dispatch({ type: 'TOGGLE' });
-      };
-
-      window.addEventListener('mousedown', handleOutsideClick);
-
-      return () => {
-        window.removeEventListener('mousedown', handleOutsideClick);
-      };
-    }, [state.isActive, dispatch]);
-
-    useEffect(() => {
-      if (!onChange || !state.items.size) {
-        return;
-      }
-
-      onChange(state.selected);
-      //eslint-disable-next-line
-    }, [state.selected]);
-
-    return (
-      <SelectContext.Provider value={{ state, dispatch }}>
-        <div
-          ref={targetRef}
-          style={{ ...style, width }}
-          className={clsx(s.select({ size }), className, sx(propSx))}
-          {...props}
-        >
-          <SelectTrigger variant={variant}>
-            {state.selected !== null && state.items.get(state.selected || '')}
-          </SelectTrigger>
-          <SelectOptionList>{children}</SelectOptionList>
-          <input type="hidden" name={name} value={state.selected || ''} />
-        </div>
-      </SelectContext.Provider>
-    );
-  },
-);
-Select.displayName = 'Select';
-
-export { s as selectCss };

package/src/components/Select/SelectContext.ts

@@ -1,59 +0,0 @@
-import { createContext, type Dispatch, type ReactNode } from 'react';
-
-type SelectState = {
-  isActive: boolean;
-  selected?: string;
-  defaultValue?: string;
-  items: Map<string, ReactNode>;
-  containerRef: React.RefObject<HTMLDivElement | null>;
-};
-
-type SelectAction =
-  | { type: 'ADD'; payload: { value: string; children: ReactNode } }
-  | { type: 'REMOVE'; payload: { value: string } }
-  | { type: 'SELECT'; payload: { value: string } }
-  | { type: 'TOGGLE' };
-
-export const SelectContext = createContext<
-  { state: SelectState; dispatch: Dispatch<SelectAction> } | undefined
->(undefined);
-
-export const selectReducer = (
-  state: SelectState,
-  action: SelectAction,
-): SelectState => {
-  switch (action.type) {
-    case 'ADD': {
-      // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.
-      if (
-        state.selected === undefined &&
-        state.defaultValue === action.payload.value
-      ) {
-        return {
-          ...state,
-          selected: action.payload.value,
-          items: new Map(state.items).set(
-            action.payload.value,
-            action.payload.children,
-          ),
-        };
-      }
-      return {
-        ...state,
-        items: new Map(state.items).set(
-          action.payload.value,
-          action.payload.children,
-        ),
-      };
-    }
-    case 'REMOVE': {
-      const newMap = new Map(state.items);
-      newMap.delete(action.payload.value);
-      return { ...state, items: newMap };
-    }
-    case 'SELECT':
-      return { ...state, isActive: false, selected: action.payload.value };
-    case 'TOGGLE':
-      return { ...state, isActive: !state.isActive };
-  }
-};

package/src/components/Select/SelectOption.css.ts

@@ -1,14 +0,0 @@
-import { styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-
-export const selectOption = styleWithLayer({
-  padding: '0.75em 0.5em',
-
-  transition: 'background-color 0.2s ease',
-
-  cursor: 'default',
-
-  ':hover': {
-    backgroundColor: `rgb(${theme.color.accent})`,
-  },
-});

package/src/components/Select/SelectOption.tsx

@@ -1,40 +0,0 @@
-'use client';
-
-import { useContext, useEffect, type ReactNode } from 'react';
-
-import { SelectContext } from './SelectContext';
-import * as s from './SelectOption.css';
-
-interface SelectOptionProps {
-  children: ReactNode;
-  value: string;
-}
-
-export const SelectOption = ({ children, value }: SelectOptionProps) => {
-  const selectContext = useContext(SelectContext);
-
-  if (!selectContext) {
-    throw new Error('SelectOption must be rendered within a Select.');
-  }
-
-  const { dispatch } = selectContext;
-
-  useEffect(() => {
-    dispatch({ type: 'ADD', payload: { value, children } });
-
-    return () => {
-      dispatch({ type: 'REMOVE', payload: { value } });
-    };
-    // eslint-disable-next-line
-  }, [dispatch, value]);
-
-  const handleClick = () => {
-    dispatch({ type: 'SELECT', payload: { value } });
-  };
-
-  return (
-    <div className={s.selectOption} onClick={handleClick}>
-      {children}
-    </div>
-  );
-};

package/src/components/Select/SelectOptionList.css.ts

@@ -1,68 +0,0 @@
-import { keyframes } from '@vanilla-extract/css';
-
-import { recipeWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-
-const fadeIn = keyframes({
-  '0%': {
-    transform: 'scale(0.95)',
-    opacity: 0,
-  },
-
-  '100%': {
-    transform: 'scale(1)',
-    opacity: 1,
-  },
-});
-
-export const container = recipeWithLayer({
-  base: {
-    overflowY: 'auto',
-    position: 'absolute',
-    zIndex: '10',
-
-    width: '100%',
-    minWidth: 'max-content',
-    border: `1px solid rgb(${theme.color.border})`,
-    borderRadius: theme.borderRadius,
-    margin: '0.5rem 0',
-
-    backgroundColor: `rgb(${theme.color.background})`,
-
-    animation: `${fadeIn} 0.3s ease 1`,
-    transformOrigin: '0 0',
-
-    userSelect: 'none',
-
-    '::-webkit-scrollbar': {
-      width: '0.25rem',
-      height: '0.25rem',
-    },
-
-    '::-webkit-scrollbar-thumb': {
-      borderRadius: '0.5rem',
-
-      backgroundColor: `rgb(${theme.color['muted-foreground']})`,
-    },
-  },
-
-  variants: {
-    isVisible: {
-      true: {
-        display: 'block',
-      },
-      false: {
-        display: 'none',
-      },
-    },
-
-    isAbove: {
-      true: {
-        top: '100%',
-      },
-      false: {
-        bottom: '100%',
-      },
-    },
-  },
-});

package/src/components/Select/SelectOptionList.tsx

@@ -1,59 +0,0 @@
-import { useContext, useMemo, useRef, type ReactNode } from 'react';
-
-import clsx from 'clsx';
-
-import { sprinkles } from '#styles';
-
-import { SelectContext } from './SelectContext';
-import * as s from './SelectOptionList.css';
-
-interface SelectOptionListProps {
-  children: ReactNode;
-}
-
-const SelectOptionList = ({ children }: SelectOptionListProps) => {
-  const selectContext = useContext(SelectContext);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  if (!selectContext) {
-    throw new Error('SelectOption must be rendered within a Select.');
-  }
-
-  const { state } = selectContext;
-
-  const isAbove = useMemo(() => {
-    const container = containerRef.current;
-    const parent = state.containerRef.current;
-
-    if (!state.isActive || !container || !parent) {
-      return;
-    }
-
-    const parentRect = parent.getBoundingClientRect();
-    container.style.display = 'block';
-    const containerRect = container.getBoundingClientRect();
-    container.style.display = '';
-
-    // 하단에 리스트를 모두 보여줄 공간이 충분한 경우
-    if (containerRect.top + containerRect.height < window.innerHeight) {
-      return true;
-    }
-
-    // 그렇지 않으면 parent의 상단/하단 중 공간이 더 넓은 쪽으로 리스트를 보여줌
-    return parentRect.top + parentRect.height / 2 < window.innerHeight / 2;
-  }, [state.isActive, state.containerRef]);
-
-  return (
-    <div
-      ref={containerRef}
-      className={clsx(
-        s.container({ isVisible: state.isActive, isAbove }),
-        sprinkles({ boxShadow: 'accent-sm' }),
-      )}
-    >
-      {children}
-    </div>
-  );
-};
-
-export default SelectOptionList;

package/src/components/Select/SelectTrigger.css.ts

@@ -1,73 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
-
-import { theme } from '#themes';
-
-export const children = style({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-});
-
-export const icon = recipe({
-  base: {
-    flexShrink: '0',
-
-    lineHeight: '0',
-
-    transition: 'color 0.2s ease, transform 0.2s ease',
-  },
-
-  variants: {
-    isActive: {
-      false: {
-        transform: 'rotate(0)',
-      },
-      true: {
-        color: `rgb(${theme.color.primary})`,
-
-        transform: 'rotate(-180deg)',
-      },
-    },
-  },
-});
-
-export const selectTrigger = recipe({
-  base: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5em',
-    justifyContent: 'space-between',
-
-    width: '100%',
-
-    transition: 'border-color 0.2s ease',
-
-    cursor: 'pointer',
-    userSelect: 'none',
-  },
-
-  variants: {
-    isActive: {
-      true: {
-        borderColor: `rgb(${theme.color.primary})`,
-      },
-    },
-    variant: {
-      contained: {
-        padding: '0.75em 0.75em',
-        borderRadius: theme.borderRadius,
-
-        backgroundColor: `rgb(${theme.color.secondary})`,
-      },
-      outlined: {
-        padding: '0.75em 0.5em',
-        border: '1px solid',
-        borderColor: `rgb(${theme.color.border})`,
-        borderRadius: theme.borderRadius,
-
-        backgroundColor: `rgb(${theme.color.background})`,
-      },
-    },
-  },
-});

package/src/components/Select/SelectTrigger.tsx

@@ -1,49 +0,0 @@
-import { useContext } from 'react';
-
-import clsx from 'clsx';
-import { ChevronDownIcon } from 'lucide-react';
-
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import { SelectContext } from './SelectContext';
-import * as s from './SelectTrigger.css';
-
-type SelectTriggerProps = UIComponent<'div', typeof s.selectTrigger>;
-
-const SelectTrigger = ({
-  children,
-  className,
-  variant,
-  sx: propSx,
-}: SelectTriggerProps) => {
-  const selectContext = useContext(SelectContext);
-
-  if (!selectContext) {
-    throw new Error('SelectTrigger must be rendered within a Select.');
-  }
-
-  const { state, dispatch } = selectContext;
-
-  const handleClick = () => {
-    dispatch({ type: 'TOGGLE' });
-  };
-
-  return (
-    <div
-      className={clsx(
-        s.selectTrigger({ isActive: state.isActive, variant }),
-        className,
-        sx(propSx),
-      )}
-      onClick={handleClick}
-    >
-      <span className={s.children}>{children}</span>
-      <span className={s.icon({ isActive: state.isActive })}>
-        <ChevronDownIcon size="1em" strokeWidth="2px" />
-      </span>
-    </div>
-  );
-};
-
-export default SelectTrigger;

package/src/components/Skeleton/Skeleton.css.ts

@@ -1,26 +0,0 @@
-import { keyframes } from '@vanilla-extract/css';
-
-import { styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-
-const shimmer = keyframes({
-  '0%': {
-    backgroundPosition: '-300% 0',
-  },
-
-  '100%': {
-    backgroundPosition: '300% 0',
-  },
-});
-
-export const skeleton = styleWithLayer({
-  display: 'block',
-
-  maxWidth: '100%',
-  borderRadius: theme.borderRadius,
-
-  background: `linear-gradient(90deg, rgba(${theme.color.accent}, 0.4) 30%, rgba(${theme.color.accent}, 0.2) 65%, rgba(${theme.color.accent}, 0.4))`,
-  backgroundSize: '300% 100%',
-
-  animation: `${shimmer} 5s linear 0s infinite`,
-});

package/src/components/Skeleton/index.tsx

@@ -1,27 +0,0 @@
-import { forwardRef, type CSSProperties } from 'react';
-
-import { clsx } from 'clsx';
-
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './Skeleton.css';
-
-interface SkeletonProps extends UIComponent<'div'> {
-  width?: CSSProperties['width'];
-  height?: CSSProperties['height'];
-}
-
-export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
-  ({ className, width, height, style, sx: propSx, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={clsx(s.skeleton, className, sx(propSx))}
-        style={{ ...style, width, height }}
-        {...props}
-      />
-    );
-  },
-);
-Skeleton.displayName = 'Skeleton';