@kimdw-rtk/ui 0.0.0 → 0.0.2

package/src/components/Tabs/index.ts

@@ -1,4 +0,0 @@
-export * from './Tabs';
-export * from './TabsContent';
-export * from './TabsList';
-export * from './TabsTrigger';

package/src/components/TextField/TextField.css.ts

@@ -1,81 +0,0 @@
-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][500],
-      },
-    }),
-  }),
-  {} as Record<ScaleColor, string>,
-);
-
-export const textField = recipeWithLayer({
-  base: {
-    padding: '0.75em 0.5em',
-    border: `1px solid`,
-    borderColor: ` rgb(${theme.color.border})`,
-
-    backgroundColor: `rgb(${theme.color.background})`,
-
-    color: `rgb(${theme.color.foreground})`,
-
-    transition: 'border-color 0.15s ease, color 0.15s ease',
-
-    outline: 'none',
-
-    ':focus': {
-      borderColor: `rgb(${backgroundVar})`,
-    },
-
-    ':disabled': {
-      color: `rgb(${theme.color['muted-foreground']})`,
-    },
-  },
-  variants: {
-    color: {
-      ...semanticColors,
-      ...scaleColors,
-    },
-
-    size: {
-      sm: {
-        borderRadius: theme.borderRadius,
-
-        fontSize: '0.875em',
-      },
-      md: {
-        borderRadius: theme.borderRadius,
-
-        fontSize: '1em',
-      },
-      lg: {
-        borderRadius: theme.borderRadius,
-
-        fontSize: '1.125em',
-      },
-    },
-  },
-});

package/src/components/TextField/TextField.spec.tsx

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

package/src/components/TextField/index.tsx

@@ -1,38 +0,0 @@
-import { forwardRef } from 'react';
-
-import { clsx } from 'clsx';
-
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './TextField.css';
-
-interface TextFieldProps extends UIComponent<'input', typeof s.textField> {
-  type?: React.HTMLInputTypeAttribute;
-}
-
-export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
-  (
-    {
-      className,
-      type = 'text',
-      size = 'md',
-      color = 'primary',
-      sx: propSx,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <input
-        ref={ref}
-        type={type}
-        className={clsx(className, s.textField({ size, color }), sx(propSx))}
-        {...props}
-      />
-    );
-  },
-);
-TextField.displayName = 'TextField';
-
-export { s as textFieldCss };

package/src/components/Toast/Toast.css.ts

@@ -1,79 +0,0 @@
-import { createVar, keyframes } from '@vanilla-extract/css';
-
-import { recipeWithLayer, styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-import { semanticColor } from '#tokens';
-
-const colorVar = createVar();
-const foregroundVar = createVar();
-
-const semanticColors = semanticColor.reduce(
-  (prev, color) => ({
-    ...prev,
-    [color]: styleWithLayer({
-      vars: {
-        [colorVar]: theme.color[color],
-        [foregroundVar]: theme.color[`${color}-foreground`],
-      },
-    }),
-  }),
-  {} as Record<(typeof semanticColor)[number], string>,
-);
-
-const fill = keyframes({
-  '0%': {
-    transform: 'scaleX(0)',
-  },
-  '100%': {
-    transform: 'scaleX(1)',
-  },
-});
-
-export const progress = recipeWithLayer({
-  base: {
-    position: 'absolute',
-    inset: '0',
-
-    width: '100%',
-
-    backgroundColor: `rgba(${foregroundVar}, 0.25)`,
-
-    transformOrigin: '0 0',
-  },
-
-  variants: {
-    animation: {
-      true: {
-        animationName: fill,
-        animationTimingFunction: 'linear',
-        animationIterationCount: '1',
-        animationFillMode: 'forwards',
-      },
-      false: {
-        display: 'none',
-      },
-    },
-  },
-});
-
-export const toast = recipeWithLayer({
-  base: {
-    position: 'relative',
-    overflow: 'hidden',
-
-    padding: '0.875em',
-
-    backgroundColor: `rgb(${colorVar})`,
-
-    color: `rgb(${foregroundVar})`,
-    whiteSpace: 'nowrap',
-    wordBreak: 'break-all',
-
-    cursor: 'pointer',
-  },
-  variants: {
-    color: {
-      ...semanticColors,
-    },
-  },
-});

package/src/components/Toast/Toast.spec.tsx

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

package/src/components/Toast/index.tsx

@@ -1,48 +0,0 @@
-import { forwardRef } from 'react';
-
-import clsx from 'clsx';
-
-import { Box } from '#components';
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './Toast.css';
-
-interface ToastProps extends UIComponent<'div', typeof s.toast> {
-  duration?: number;
-}
-
-export const Toast = forwardRef<HTMLDivElement, ToastProps>(
-  (
-    {
-      children,
-      color = 'accent',
-      className,
-      duration = 0,
-      sx: propSx,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Box
-        ref={ref}
-        boxShadow="accent-sm"
-        rounded
-        className={clsx(s.toast({ color }), className, sx(propSx))}
-        {...props}
-      >
-        <div
-          className={s.progress({ animation: duration !== 0 })}
-          style={{
-            animationDuration: duration > 0 ? `${duration}ms` : undefined,
-          }}
-        ></div>
-        <span style={{ position: 'relative' }}>{children}</span>
-      </Box>
-    );
-  },
-);
-Toast.displayName = 'Toast';
-
-export { s as toastCss };

package/src/components/Typography/Typography.css.ts

@@ -1,17 +0,0 @@
-import { recipeWithLayer } from '#styleUtils';
-
-export const typography = recipeWithLayer({
-  base: {
-    margin: '0',
-  },
-  variants: {
-    isEllipsis: {
-      true: {
-        overflow: 'hidden',
-
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-      },
-    },
-  },
-});

package/src/components/Typography/Typography.spec.tsx

@@ -1,35 +0,0 @@
-import type { ComponentProps } from 'react';
-
-import { cleanup, render, screen } from '@testing-library/react';
-
-import { Typography } from '#components';
-
-import { uiTest } from '../../tests/uiTest';
-
-describe('Typogrphy 컴포넌트', () => {
-  uiTest(Typography, 'Typography');
-
-  test('기본적으로 p태그로 출력한다.', () => {
-    render(<Typography>test</Typography>);
-    expect(screen.getByText('test').tagName.toLowerCase()).toBe('p');
-  });
-
-  test('as에 전달된 알맞은 태그로 출력한다.', () => {
-    const tags: ComponentProps<typeof Typography>['as'][] = [
-      'p',
-      'h1',
-      'h2',
-      'h3',
-      'h4',
-      'h5',
-      'h6',
-      'span',
-    ];
-
-    for (const tag of tags) {
-      cleanup();
-      render(<Typography as={tag}>test</Typography>);
-      expect(screen.getByText('test').tagName.toLowerCase()).toBe(tag);
-    }
-  });
-});

package/src/components/Typography/index.tsx

@@ -1,57 +0,0 @@
-import { forwardRef } from 'react';
-
-import clsx from 'clsx';
-
-import { sprinkles, type SprinklesProps } from '#styles';
-import { type UIComponent } from '#types';
-
-import * as s from './Typography.css';
-
-type TypographyElement = 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'span';
-
-type TypographyProps<T extends TypographyElement = TypographyElement> = Omit<
-  UIComponent<T, typeof s.typography> & {
-    as?: T;
-    color?: SprinklesProps['color'];
-    fontSize?: SprinklesProps['fontSize'];
-    fontWeight?: SprinklesProps['fontWeight'];
-    lineHeight?: SprinklesProps['lineHeight'];
-  },
-  'ref'
->;
-
-export const Typography = forwardRef<HTMLParagraphElement, TypographyProps>(
-  (
-    {
-      children,
-      as: Component = 'p',
-      className,
-      color = 'foreground',
-      fontSize = 'md',
-      fontWeight = 'normal',
-      lineHeight,
-      isEllipsis = false,
-      sx,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <Component
-        ref={ref}
-        className={clsx(
-          s.typography({ isEllipsis }),
-          sprinkles({ color, fontSize, fontWeight, lineHeight }),
-          sx && sprinkles(sx),
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </Component>
-    );
-  },
-);
-Typography.displayName = 'Typography';
-
-export { s as typographyCss };

package/src/components/index.ts

@@ -1,18 +0,0 @@
-export * from './Accordion';
-export * from './Alert';
-export * from './Box';
-export * from './Button';
-export * from './Card';
-export * from './Chip';
-export * from './Confirm';
-export * from './Dialog';
-export * from './Navigation';
-export * from './Range';
-export * from './ScrollArea';
-export * from './Select';
-export * from './Skeleton';
-export * from './Table';
-export * from './Tabs';
-export * from './TextField';
-export * from './Toast';
-export * from './Typography';

package/src/contexts/UIProvider.tsx

@@ -1,30 +0,0 @@
-'use client';
-
-import type { ReactNode } from 'react';
-
-import { OverlayProvider, type OverlayOption } from '@kimdw-rtk/utils';
-
-import { ToastProvider } from '#hooks';
-
-import * as overlayStyle from '../styles/overlay.css';
-
-interface UIProviderProps {
-  children: ReactNode;
-  overlayUnmountOn?: OverlayOption['unmountOn'];
-}
-
-export const UIProvider = ({
-  children,
-  overlayUnmountOn = 'transitionEnd',
-}: UIProviderProps) => {
-  return (
-    <>
-      <OverlayProvider
-        className={{ ...overlayStyle }}
-        unmountOn={overlayUnmountOn}
-      >
-        <ToastProvider>{children}</ToastProvider>
-      </OverlayProvider>
-    </>
-  );
-};

package/src/contexts/index.ts

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

package/src/hooks/index.ts

@@ -1,5 +0,0 @@
-export * from './useDialog';
-export * from './usePointerSlider';
-export * from './useRipple';
-export * from './useToast';
-export * from './useToast/ToastProvider';

package/src/hooks/useDialog/index.tsx

@@ -1,51 +0,0 @@
-'use client';
-
-import { type ReactNode, useCallback, useMemo, useRef } from 'react';
-
-import { useOverlay } from '@kimdw-rtk/utils';
-
-import { Alert, Confirm } from '#components';
-
-export const useDialog = () => {
-  const { push } = useOverlay();
-  const dialogRef = useRef<{ close: () => void }>(null);
-
-  const alert = useCallback(
-    (message: ReactNode) => {
-      return new Promise((resolve) => {
-        push(<Alert>{message}</Alert>, { onClose: () => resolve(true) });
-      });
-    },
-    [push],
-  );
-
-  const confirm = useCallback(
-    (message: ReactNode): Promise<boolean> => {
-      return new Promise((resolve) => {
-        const handleConfirm = () => {
-          resolve(true);
-          dialogRef.current?.close();
-        };
-
-        const handleCancle = () => {
-          resolve(false);
-          dialogRef.current?.close();
-        };
-
-        push(
-          <Confirm
-            ref={dialogRef}
-            onConfirm={handleConfirm}
-            onCancle={handleCancle}
-          >
-            {message}
-          </Confirm>,
-          { onClose: () => resolve(false) },
-        );
-      });
-    },
-    [push],
-  );
-
-  return useMemo(() => ({ alert, confirm }), [alert, confirm]);
-};

package/src/hooks/useDialog/useDialog.spec.tsx

@@ -1,80 +0,0 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
-
-import { UIProvider } from '#contexts';
-import { useDialog } from '#hooks';
-
-describe('useDialog 테스트', () => {
-  const mockFn = jest.fn();
-
-  beforeEach(() => {
-    const TestComponent = () => {
-      const { alert, confirm } = useDialog();
-
-      const handleConfirmClick = async () => {
-        mockFn(await confirm('confirm'));
-      };
-
-      return (
-        <>
-          <button onClick={() => alert('alert')}>alert click</button>
-          <button onClick={handleConfirmClick}>confirm click</button>
-        </>
-      );
-    };
-
-    render(
-      <UIProvider overlayUnmountOn={'exit'}>
-        <TestComponent />
-      </UIProvider>,
-    );
-  });
-
-  it('확인 버튼을 누르면 alert을 닫을 수 있다.', async () => {
-    const alertButton = screen.getByRole('button', { name: 'alert click' });
-
-    expect(screen.queryByText('alert')).not.toBeInTheDocument();
-
-    act(() => {
-      alertButton.click();
-    });
-
-    expect(screen.getByText('alert')).toBeInTheDocument();
-
-    const okButton = screen.getByRole('button', { name: '확인' });
-    act(() => {
-      okButton.click();
-    });
-
-    expect(screen.queryByText('alert')).not.toBeInTheDocument();
-  });
-
-  it.skip('confirm의 확인 버튼을 누르면 true, 취소 버튼을 누르면 false를 반환한다.', async () => {
-    const confirmButton = screen.getByRole('button', { name: 'confirm click' });
-
-    act(() => {
-      confirmButton.click();
-    });
-
-    const okButton = screen.getByRole('button', { name: '확인' });
-    act(() => {
-      okButton.click();
-    });
-
-    await waitFor(() => {
-      expect(mockFn.mock.calls[0][0]).toBe(true);
-    });
-
-    act(() => {
-      confirmButton.click();
-    });
-
-    const cancelButton = screen.getByRole('button', { name: '취소' });
-    act(() => {
-      cancelButton.click();
-    });
-
-    await waitFor(() => {
-      expect(mockFn.mock.calls[1][0]).toBe(false);
-    });
-  });
-});

package/src/hooks/useMouseScroll/index.ts

@@ -1,63 +0,0 @@
-'use client';
-
-import { useEffect } from 'react';
-
-/**
- * 마우스를 사용하는 환경에서도 드래그로 가로 스크롤을 할 수 있게 만드는 hook
- */
-export const useMouseScroll = <T extends React.RefObject<HTMLElement | null>>(
-  ref: T,
-): void => {
-  useEffect(() => {
-    const element = ref.current;
-    let isDown = false,
-      startX = 0,
-      startLeft = 0;
-
-    if (element === null) {
-      return;
-    }
-
-    const handleMouseDown = (e: MouseEvent) => {
-      if (!element.contains(e.target as Node)) {
-        return;
-      }
-
-      isDown = true;
-
-      startLeft = element.scrollLeft;
-      startX = e.x;
-    };
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!isDown) {
-        return;
-      }
-
-      element.scrollLeft = startLeft + startX - e.x;
-    };
-
-    const handleMouseUp = () => {
-      isDown = false;
-    };
-
-    const handleWheel = (e: WheelEvent) => {
-      element.scrollTo({
-        left: element.scrollLeft + e.deltaY,
-        behavior: 'smooth',
-      });
-    };
-
-    window.addEventListener('mousedown', handleMouseDown);
-    window.addEventListener('mousemove', handleMouseMove);
-    window.addEventListener('mouseup', handleMouseUp);
-    element.addEventListener('wheel', handleWheel);
-
-    return () => {
-      window.removeEventListener('mousedown', handleMouseDown);
-      window.removeEventListener('mousemove', handleMouseMove);
-      window.removeEventListener('mouseup', handleMouseUp);
-      element.removeEventListener('wheel', handleWheel);
-    };
-  }, [ref]);
-};