@kimdw-rtk/ui 0.0.0

package/src/components/Navigation/NavigationItem.tsx

@@ -0,0 +1,24 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './NavigationItem.css';
+
+type NavigationItemProps = UIComponent<'div', typeof s.container>;
+
+export const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(
+  ({ style, className, sx: propSx, isSelected = false, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        style={{ ...style }}
+        className={clsx(s.container({ isSelected }), className, sx(propSx))}
+        {...props}
+      />
+    );
+  },
+);
+NavigationItem.displayName = 'NavigationItem';

package/src/components/Navigation/NavigationLogo.css.ts

@@ -0,0 +1,5 @@
+import { styleWithLayer } from '#styleUtils';
+
+export const navigationLogo = styleWithLayer({
+  marginRight: '0.5em',
+});

package/src/components/Navigation/NavigationLogo.tsx

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './NavigationLogo.css';
+
+type NavigationLogoProps = UIComponent<'div'>;
+
+export const NavigationLogo = forwardRef<HTMLDivElement, NavigationLogoProps>(
+  ({ className, sx: propSx, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(
+          s.navigationLogo,
+          className,
+          sx({ marginRight: { mobile: 'lg', desktop: '3xl' } }),
+          sx(propSx),
+        )}
+        {...props}
+      />
+    );
+  },
+);
+NavigationLogo.displayName = 'NavigationLogo';

package/src/components/Navigation/NavigationMenu.css.ts

@@ -0,0 +1,23 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { spacing } from '#tokens';
+
+import { narrow } from './NavigationDrawer.css';
+
+export const navigationMenu = styleWithLayer({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.5em',
+
+  selectors: {
+    [`${narrow} &`]: {
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      gap: '0',
+
+      width: '100%',
+      borderTop: `1px solid rgb(${theme.color['border.weak']})`,
+      paddingTop: spacing['md'],
+    },
+  },
+});

package/src/components/Navigation/NavigationMenu.tsx

@@ -0,0 +1,25 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './NavigationMenu.css';
+
+type NavigationMenuProps = UIComponent<'div'>;
+
+export const NavigationMenu = forwardRef<HTMLDivElement, NavigationMenuProps>(
+  ({ className, sx: propSx, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(s.navigationMenu, className, sx(propSx))}
+        {...props}
+      />
+    );
+  },
+);
+NavigationMenu.displayName = 'NavigationMenu';
+
+export { s as navigationMenuCss };

package/src/components/Navigation/index.ts

@@ -0,0 +1,7 @@
+export * from './NavigationAside';
+export * from './NavigationBar';
+export * from './NavigationContainer';
+export * from './NavigationDrawer';
+export * from './NavigationItem';
+export * from './NavigationLogo';
+export * from './NavigationMenu';

package/src/components/Range/Range.css.ts

@@ -0,0 +1,132 @@
+import { createVar } from '@vanilla-extract/css';
+
+import { recipeWithLayer, styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+import { semanticColor } from '#tokens';
+
+import { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';
+
+const backgroundVar = createVar();
+
+const semanticColors = semanticColor.reduce(
+  (prev, color) => ({
+    ...prev,
+    [color]: styleWithLayer({
+      vars: {
+        [backgroundVar]: theme.color[color],
+      },
+    }),
+  }),
+  {} as Record<(typeof semanticColor)[number], string>,
+);
+
+const scaleColors = SCALE_COLOR.reduce(
+  (prev, value) => ({
+    ...prev,
+    [value]: styleWithLayer({
+      vars: {
+        [backgroundVar]: theme.color[value][100],
+      },
+    }),
+  }),
+  {} as Record<ScaleColor, string>,
+);
+
+export const range = recipeWithLayer({
+  base: {
+    position: 'relative',
+
+    width: '100%',
+    height: '2em',
+
+    userSelect: 'none',
+  },
+
+  variants: {
+    color: {
+      ...semanticColors,
+      ...scaleColors,
+    },
+
+    size: {
+      sm: {
+        fontSize: '0.75em',
+      },
+
+      md: {
+        fontSize: '1em',
+      },
+
+      lg: {
+        fontSize: '1.25em',
+      },
+    },
+  },
+});
+
+export const thumb = styleWithLayer({
+  display: 'inline-block',
+  position: 'absolute',
+  top: '50%',
+
+  width: '1.25em',
+  height: '1.25em',
+
+  borderRadius: '50%',
+
+  boxShadow: `0 0 0.375em 0.125em rgba(${backgroundVar}, 0.33)`,
+  backgroundColor: `rgb(${backgroundVar})`,
+
+  transform: 'translate(-50%, -50%)',
+
+  cursor: 'pointer',
+
+  '::before': {
+    position: 'absolute',
+    inset: '-0.75em',
+
+    content: '',
+  },
+
+  '::after': {
+    position: 'absolute',
+    inset: '0',
+
+    borderRadius: '50%',
+
+    boxShadow: `0 0 0.5em 0.125em rgba(${backgroundVar}, 0.5)`,
+
+    opacity: '0',
+    transition: 'opacity 0.2s ease',
+
+    content: '',
+  },
+
+  selectors: {
+    '&:hover::after': {
+      opacity: '1',
+    },
+  },
+});
+
+export const fill = styleWithLayer({
+  position: 'absolute',
+  top: '0',
+
+  height: '100%',
+
+  backgroundColor: `rgb(${backgroundVar})`,
+});
+
+export const bar = styleWithLayer({
+  position: 'absolute',
+  top: '50%',
+
+  width: '100%',
+  height: '0.5em',
+  borderRadius: theme.borderRadius,
+
+  backgroundColor: `rgb(${theme.color.muted})`,
+
+  transform: 'translateY(-50%)',
+});

package/src/components/Range/Range.spec.tsx

@@ -0,0 +1,6 @@
+import { uiTest } from '../../tests/uiTest';
+import { Range } from './Range';
+
+describe('Range 컴포넌트', () => {
+  uiTest(Range, 'Range');
+});

package/src/components/Range/Range.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+import { forwardRef, useEffect, useRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import { usePointerSlider } from '../../hooks/usePointerSlider';
+import * as s from './Range.css';
+
+interface RangeProps
+  extends Omit<UIComponent<'div', typeof s.range>, 'children' | 'onChange'> {
+  min: number;
+  max: number;
+  defaultMinValue: number;
+  defaultMaxValue: number;
+  onChange: (min: number, max: number) => void;
+}
+
+export const Range = forwardRef<HTMLDivElement, RangeProps>(
+  (
+    {
+      min,
+      max,
+      defaultMinValue,
+      defaultMaxValue,
+      onChange,
+      className,
+      color = 'primary',
+      size = 'md',
+      sx: propSx,
+      ...props
+    },
+    ref,
+  ) => {
+    const barRef = useRef<HTMLDivElement>(null);
+    const leftThumbRef = useRef<HTMLSpanElement>(null);
+    const rightThumbRef = useRef<HTMLSpanElement>(null);
+    const leftValue = usePointerSlider(leftThumbRef, {
+        min,
+        max,
+        defaultValue: defaultMinValue,
+      }),
+      rightValue = usePointerSlider(rightThumbRef, {
+        min,
+        max,
+        defaultValue: defaultMaxValue,
+      });
+    const initRef = useRef<boolean>(false);
+
+    const minValue = Math.min(leftValue, rightValue),
+      maxValue = Math.max(leftValue, rightValue);
+
+    useEffect(() => {
+      if (!initRef.current) {
+        initRef.current = true;
+        return;
+      }
+
+      onChange(minValue, maxValue);
+      // eslint-disable-next-line
+    }, [minValue, maxValue]);
+
+    return (
+      <div
+        ref={ref}
+        className={clsx(s.range({ color, size }), className, sx(propSx))}
+        {...props}
+      >
+        <div className={s.bar}>
+          <div
+            ref={barRef}
+            className={s.fill}
+            style={{
+              left: `${((minValue - min) / (max - min)) * 100}%`,
+              right: `${(1 - (maxValue - min) / (max - min)) * 100}%`,
+            }}
+          />
+        </div>
+        <span ref={leftThumbRef} className={s.thumb} />
+        <span ref={rightThumbRef} className={s.thumb} />
+      </div>
+    );
+  },
+);
+Range.displayName = 'Range';
+
+export { s as rangeCss };

package/src/components/Range/index.ts

@@ -0,0 +1 @@
+export * from './Range';

package/src/components/ScrollArea/ScrollArea.css.ts

@@ -0,0 +1,40 @@
+import { style } from '@vanilla-extract/css';
+
+import { styleWithLayer } from '#styleUtils';
+
+const MASK_SIZE = '3rem';
+
+export const scrollArea = styleWithLayer({
+  width: '100%',
+  overflowX: 'scroll',
+
+  '::-webkit-scrollbar': {
+    display: 'none',
+  },
+});
+
+export const maskLeft = style({
+  maskImage: `linear-gradient(to left,
+  black 0%,
+  black calc(100% - ${MASK_SIZE}),
+  transparent 100%)`,
+});
+
+export const maskRight = style({
+  maskImage: `linear-gradient(to right,
+  black 0%,
+  black calc(100% - ${MASK_SIZE}),
+  transparent 100%)`,
+});
+
+export const maskBoth = style({
+  maskImage: `linear-gradient(to right,
+  transparent 0%,
+  black ${MASK_SIZE},
+  black calc(100% - ${MASK_SIZE}),
+  transparent 100%)`,
+});
+
+export const wrapper = style({
+  width: 'max-content',
+});

package/src/components/ScrollArea/ScrollArea.spec.tsx

@@ -0,0 +1,6 @@
+import { uiTest } from '../../tests/uiTest';
+import { ScrollArea } from './ScrollArea';
+
+describe('ScrollArea 컴포넌트', () => {
+  uiTest(ScrollArea, 'ScrollArea');
+});

package/src/components/ScrollArea/ScrollArea.tsx

@@ -0,0 +1,68 @@
+'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/ScrollArea/index.ts

@@ -0,0 +1 @@
+export * from './ScrollArea';

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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,111 @@
+'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 };