@kimdw-rtk/ui 0.0.0 → 0.0.3

package/src/components/Button/index.tsx

@@ -1,60 +0,0 @@
-'use client';
-
-import { forwardRef, type ReactElement } from 'react';
-
-import { clsx } from 'clsx';
-
-import { useRipple } from '#hooks';
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './Button.css';
-
-interface ButtonProps
-  extends Omit<UIComponent<'button', typeof s.button>, 'hasIcon'> {
-  icon?: ReactElement;
-}
-
-export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    {
-      children,
-      color = 'primary',
-      size = 'md',
-      variant = 'contained',
-      pulse = false,
-      className,
-      sx: propSx,
-      icon,
-      ...props
-    },
-    ref,
-  ) => {
-    const { ripple } = useRipple<HTMLButtonElement>(ref);
-
-    return (
-      <button
-        ref={ref}
-        className={clsx(
-          className,
-          s.button({
-            color,
-            size,
-            variant,
-            pulse,
-            hasIcon: icon !== undefined,
-          }),
-          sx(propSx),
-        )}
-        {...props}
-      >
-        {icon !== undefined && <span className={s.icon}>{icon}</span>}
-        <span className={s.span({ size })}>{children}</span>
-        {ripple}
-      </button>
-    );
-  },
-);
-Button.displayName = 'Button';
-
-export { s as buttonCss };

package/src/components/Card/Card.css.ts

@@ -1,93 +0,0 @@
-import { recipeWithLayer, styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-import { semanticColor } from '#tokens';
-
-import { SCALE_COLOR, type ScaleColor } from '../../tokens/scale/color';
-import { cardInteraction } from './CardInteraction.css';
-
-const semanticColors = semanticColor.reduce(
-  (prev, color) => ({
-    ...prev,
-    [color]: styleWithLayer({
-      backgroundColor: `rgb(${theme.color[color]})`,
-    }),
-  }),
-  {} as Record<(typeof semanticColor)[number], string>,
-);
-
-const scaleColors = SCALE_COLOR.reduce(
-  (prev, value) => ({
-    ...prev,
-    [value]: styleWithLayer({
-      backgroundColor: `color-mix(in srgb, rgb(${theme.color[value][500]}) 20%, rgb(${theme.color.background}) 80%)`,
-    }),
-  }),
-  {} as Record<ScaleColor, string>,
-);
-
-export const card = recipeWithLayer({
-  base: {
-    display: 'flex',
-    flexDirection: 'column',
-    overflow: 'hidden',
-    position: 'relative',
-
-    borderRadius: theme.borderRadius,
-
-    color: `rgb(${theme.color.foreground})`,
-
-    transition: 'border-color 0.2s ease, transform 0.4s ease',
-
-    selectors: {
-      [`&:has(${cardInteraction}:hover)`]: {
-        borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 10%, rgb(${theme.color.border}) 90%)`,
-      },
-
-      [`&:has(${cardInteraction}:active)`]: {
-        borderColor: `color-mix(in srgb, rgb(${theme.color.primary}) 40%, rgb(${theme.color.border}) 60%)`,
-      },
-    },
-  },
-  variants: {
-    variant: {
-      contained: {},
-
-      outlined: {
-        border: '1px solid',
-        borderColor: `rgb(${theme.color.border})`,
-      },
-
-      glass: {
-        border: `1px solid rgb(${theme.color['border.weak']})`,
-        borderRadius: '0.75rem',
-
-        background: `linear-gradient(rgba(${theme.color['card.gradient']}, 0.06) 0%, rgba(${theme.color['card.gradient']}, 0.02) 100%)`,
-        backdropFilter: 'blur(1rem)',
-
-        '::before': {
-          position: 'absolute',
-          inset: '0',
-
-          background:
-            'linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)',
-
-          opacity: '0',
-          transition: 'opacity 0.3s ease',
-
-          content: '',
-        },
-
-        selectors: {
-          '&:hover::before': {
-            opacity: '1',
-          },
-        },
-      },
-    },
-
-    color: {
-      ...semanticColors,
-      ...scaleColors,
-    },
-  },
-});

package/src/components/Card/Card.spec.tsx

@@ -1,24 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { uiTest } from '../../tests/uiTest';
-import { Card, CardContent, CardInteraction, CardThumbnail } from './';
-
-describe('Card 컴포넌트', () => {
-  uiTest(Card, 'Card');
-  uiTest(CardContent, 'CardContent');
-  uiTest(CardInteraction, 'CardInteraction');
-  uiTest(CardThumbnail, 'CardThumbnail');
-
-  it('CardInteraction을 클릭하면 onClick이 호출되어야 한다', () => {
-    const handleClick = jest.fn();
-    render(
-      <Card onClick={handleClick}>
-        <CardInteraction>Click</CardInteraction>
-      </Card>,
-    );
-
-    fireEvent.click(screen.getByText('Click'));
-
-    expect(handleClick).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/Card/Card.tsx

@@ -1,41 +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 './Card.css';
-
-interface CardProps extends UIComponent<'div', typeof s.card> {
-  width?: CSSProperties['width'];
-  height?: CSSProperties['height'];
-}
-
-export const Card = forwardRef<HTMLDivElement, CardProps>(
-  (
-    {
-      width,
-      height,
-      color = 'card',
-      variant = 'outlined',
-      className,
-      style,
-      sx: propSx,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={clsx(s.card({ color, variant }), className, sx(propSx))}
-        style={{ width, height, ...style }}
-        {...props}
-      />
-    );
-  },
-);
-Card.displayName = 'Card';
-
-export { s as cardCss };

package/src/components/Card/CardContent.tsx

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

package/src/components/Card/CardInteraction.css.ts

@@ -1,11 +0,0 @@
-import { styleWithLayer } from '#styleUtils';
-
-export const cardInteraction = styleWithLayer({
-  position: 'relative',
-  overflow: 'hidden',
-
-  height: '100%',
-
-  cursor: 'pointer',
-  userSelect: 'none',
-});

package/src/components/Card/CardInteraction.tsx

@@ -1,36 +0,0 @@
-'use client';
-
-import { forwardRef } from 'react';
-
-import clsx from 'clsx';
-
-import { useRipple } from '#hooks';
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './CardInteraction.css';
-
-type CardInteractionProps = UIComponent<'div'>;
-
-export const CardInteraction = forwardRef<HTMLDivElement, CardInteractionProps>(
-  ({ children, className, sx: propSx, ...props }, ref) => {
-    const { ripple } = useRipple<HTMLDivElement>(ref);
-
-    return (
-      <div
-        ref={ref}
-        className={clsx(
-          className,
-          s.cardInteraction,
-          s.cardInteraction,
-          sx(propSx),
-        )}
-        {...props}
-      >
-        {children}
-        {ripple}
-      </div>
-    );
-  },
-);
-CardInteraction.displayName = 'CardInteraction';

package/src/components/Card/CardThumbnail.tsx

@@ -1,23 +0,0 @@
-import { forwardRef } from 'react';
-
-import clsx from 'clsx';
-
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './CardThumbnail.css';
-
-type CardThumbnailProps = UIComponent<'img'>;
-
-export const CardThumbnail = forwardRef<HTMLImageElement, CardThumbnailProps>(
-  ({ className, sx: propSx, ...props }, ref) => {
-    return (
-      <img
-        ref={ref}
-        className={clsx(s.thumbnail, className, sx(propSx))}
-        {...props}
-      />
-    );
-  },
-);
-CardThumbnail.displayName = 'CardThumbnail';

package/src/components/Chip/Chip.css.ts

@@ -1,75 +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 foregroundVar = createVar();
-
-const semanticColors = semanticColor.reduce(
-  (prev, color) => ({
-    ...prev,
-    [color]: styleWithLayer({
-      vars: {
-        [backgroundVar]: theme.color[color],
-        [foregroundVar]: theme.color[`${color}-foreground`],
-      },
-    }),
-  }),
-  {} as Record<(typeof semanticColor)[number], string>,
-);
-
-const scaleColors = SCALE_COLOR.reduce(
-  (prev, value) => ({
-    ...prev,
-    [value]: styleWithLayer({
-      vars: {
-        [backgroundVar]: theme.color[value][500],
-        [foregroundVar]: theme.color[value][50],
-      },
-    }),
-  }),
-  {} as Record<ScaleColor, string>,
-);
-
-export const chip = recipeWithLayer({
-  base: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    lineHeight: '0',
-    gap: '0.125em',
-
-    height: '2em',
-    padding: '0 0.75em',
-    borderRadius: theme.borderRadius,
-
-    backgroundColor: `rgb(${backgroundVar})`,
-    color: `rgb(${foregroundVar})`,
-
-    userSelect: 'none',
-  },
-
-  variants: {
-    color: {
-      ...semanticColors,
-      ...scaleColors,
-    },
-
-    size: {
-      sm: {
-        fontSize: '0.75em',
-      },
-
-      md: {
-        fontSize: '0.875em',
-      },
-
-      lg: {
-        fontSize: '1em',
-      },
-    },
-  },
-});

package/src/components/Chip/Chip.tsx

@@ -1,37 +0,0 @@
-import { forwardRef } from 'react';
-
-import clsx from 'clsx';
-
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-import * as s from './Chip.css';
-
-type ChipProps = UIComponent<'div', typeof s.chip>;
-
-export const Chip = forwardRef<HTMLDivElement, ChipProps>(
-  (
-    {
-      children,
-      className,
-      color = 'primary',
-      size = 'md',
-      sx: propSx,
-      ...props
-    },
-    ref,
-  ) => {
-    return (
-      <div
-        ref={ref}
-        className={clsx(s.chip({ color, size }), className, sx(propSx))}
-        {...props}
-      >
-        <span>{children}</span>
-      </div>
-    );
-  },
-);
-Chip.displayName = 'Chip';
-
-export { s as chipCss };

package/src/components/Confirm/index.tsx

@@ -1,44 +0,0 @@
-'use client';
-
-import { useImperativeHandle, type ReactNode, type Ref } from 'react';
-
-import { useOverlay, usePreventKeyboardInput } from '@kimdw-rtk/utils';
-
-import { Box, Button, Dialog, DialogContent, DialogFooter } from '#components';
-
-interface ConfirmProps {
-  children: ReactNode;
-  ref?: Ref<{ close: () => void }>;
-  onConfirm: () => void;
-  onCancle: () => void;
-}
-
-export const Confirm = ({
-  children,
-  ref,
-  onConfirm,
-  onCancle,
-}: ConfirmProps) => {
-  const { close } = useOverlay();
-  usePreventKeyboardInput();
-
-  useImperativeHandle(ref, () => ({
-    close,
-  }));
-
-  return (
-    <Dialog>
-      <DialogContent>{children}</DialogContent>
-      <DialogFooter>
-        <Box flex gap="md">
-          <Button size="sm" onClick={onConfirm}>
-            확인
-          </Button>
-          <Button color="secondary" size="sm" onClick={onCancle}>
-            취소
-          </Button>
-        </Box>
-      </DialogFooter>
-    </Dialog>
-  );
-};

package/src/components/Dialog/Dialog.css.ts

@@ -1,25 +0,0 @@
-import { style } from '@vanilla-extract/css';
-
-import { theme } from '#themes';
-
-export const container = style({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem',
-  overflowY: 'auto',
-
-  maxWidth: 'calc(100vw - 2rem)',
-  minWidth: 'min(20rem, calc(100vw - 2rem))',
-  maxHeight: 'calc(100vh - 2rem)',
-  borderRadius: theme.borderRadius,
-  boxSizing: 'border-box',
-
-  backgroundColor: `rgb(${theme.color.background})`,
-});
-
-export const message = style({
-  marginBottom: '1rem',
-
-  lineHeight: '150%',
-  wordBreak: 'break-all',
-});

package/src/components/Dialog/Dialog.spec.tsx

@@ -1,26 +0,0 @@
-import { render, screen, fireEvent } from '@testing-library/react';
-
-import { Dialog, DialogContent, DialogFooter, DialogHeader } from '#components';
-
-import { uiTest } from '../../tests/uiTest';
-
-describe('Dialog 컴포넌트', () => {
-  uiTest(Dialog, 'Dialog');
-  uiTest(DialogHeader, 'DialogHeader');
-  uiTest(DialogContent, 'DialogContent');
-  uiTest(DialogFooter, 'DialogFooter');
-
-  it('DialogHeader의 닫기 버튼을 클릭하면 onCloseClick이 호출되어야 한다', () => {
-    const handleCloseClick = jest.fn();
-    render(
-      <Dialog>
-        <DialogHeader onCloseClick={handleCloseClick}>Header</DialogHeader>
-        <DialogContent>Content</DialogContent>
-      </Dialog>,
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: '닫기' }));
-
-    expect(handleCloseClick).toHaveBeenCalledTimes(1);
-  });
-});

package/src/components/Dialog/Dialog.tsx

@@ -1,30 +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 './Dialog.css';
-
-type DialogProps = Omit<UIComponent<'div'>, 'color'>;
-
-export const Dialog = forwardRef<HTMLDivElement, DialogProps>(
-  ({ children, className, sx: propSx, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        flex
-        flexDirection="row"
-        gap="lg"
-        boxShadow="border-sm"
-        className={clsx(s.container, className, sx(propSx))}
-        {...props}
-      >
-        {children}
-      </Box>
-    );
-  },
-);
-Dialog.displayName = 'Dialog';

package/src/components/Dialog/DialogContent.css.ts

@@ -1,16 +0,0 @@
-import { styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-
-import * as header from './DialogHeader.css';
-
-export const container = styleWithLayer({
-  padding: '0 1.5rem 1.5rem 1.5rem',
-
-  wordBreak: 'break-all',
-
-  selectors: {
-    [`${header.container} + &`]: {
-      color: `rgb(${theme.color['muted-foreground']})`,
-    },
-  },
-});

package/src/components/Dialog/DialogContent.tsx

@@ -1,26 +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 './DialogContent.css';
-
-type DialogContentProps = Omit<UIComponent<'div'>, 'color'>;
-
-export const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, className, sx: propSx, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={clsx(s.container, className, sx(propSx))}
-        {...props}
-      >
-        {children}
-      </Box>
-    );
-  },
-);
-DialogContent.displayName = 'DialogContent';

package/src/components/Dialog/DialogFooter.css.ts

@@ -1,20 +0,0 @@
-import { styleWithLayer } from '#styleUtils';
-
-export const container = styleWithLayer({
-  maxWidth: 'calc(100vw - 2rem)',
-  minWidth: 'min(20rem, calc(100vw - 2rem))',
-  padding: '1rem',
-  borderRadius: '0.25rem',
-  boxSizing: 'border-box',
-
-  backgroundColor: '#fff',
-
-  userSelect: 'none',
-});
-
-export const message = styleWithLayer({
-  marginBottom: '1rem',
-
-  lineHeight: '150%',
-  wordBreak: 'break-all',
-});

package/src/components/Dialog/DialogFooter.tsx

@@ -1,26 +0,0 @@
-import { forwardRef } from 'react';
-
-import clsx from 'clsx';
-
-import { Box } from '#components';
-import { sx } from '#styles';
-import type { UIComponent } from '#types';
-
-type DialogFooterProps = Omit<UIComponent<'div'>, 'color'>;
-
-export const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
-  ({ children, className, sx: propSx, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        flex
-        justifyContent="flex-end"
-        className={clsx(className, sx(propSx))}
-        {...props}
-      >
-        {children}
-      </Box>
-    );
-  },
-);
-DialogFooter.displayName = 'DialogFooter';

package/src/components/Dialog/DialogHeader.css.ts

@@ -1,31 +0,0 @@
-import { styleWithLayer } from '#styleUtils';
-import { theme } from '#themes';
-
-export const container = styleWithLayer({
-  position: 'sticky',
-  top: '0',
-  padding: '1.5rem',
-  zIndex: '10',
-
-  backgroundColor: `rgb(${theme.color.background})`,
-});
-
-export const close = styleWithLayer({
-  width: '1.25rem',
-  height: '1.25rem',
-  padding: '0',
-  border: '0',
-
-  backgroundColor: 'transparent',
-
-  fontSize: '1em',
-  color: `rgb(${theme.color['muted-foreground']})`,
-
-  cursor: 'pointer',
-
-  transition: 'color 0.1s ease',
-
-  ':hover': {
-    color: `rgb(${theme.color['foreground']})`,
-  },
-});