@kimdw-rtk/ui 0.0.0

package/src/components/Button/Button.css.ts

@@ -0,0 +1,241 @@
+import { createVar, globalStyle, keyframes, style } 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.background,
+      },
+    }),
+  }),
+  {} as Record<ScaleColor, string>,
+);
+
+const pulse = keyframes({
+  '0%': {
+    backgroundPosition: '-300% 0',
+  },
+
+  '100%': {
+    backgroundPosition: '300% 0',
+  },
+});
+
+export const span = recipeWithLayer({
+  base: {
+    lineHeight: '0',
+  },
+  variants: {
+    size: {
+      sm: {
+        fontSize: '0.875em',
+      },
+
+      md: {
+        fontSize: '1em',
+      },
+
+      lg: {
+        fontSize: '1.125em',
+      },
+
+      'icon-sm': {
+        fontSize: '1em',
+      },
+
+      'icon-md': {
+        fontSize: '1.25em',
+      },
+
+      'icon-lg': {
+        fontSize: '1.5em',
+      },
+    },
+  },
+});
+
+export const button = recipeWithLayer({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    overflow: 'hidden',
+
+    border: '0',
+    borderRadius: theme.borderRadius,
+
+    fontSize: '1em',
+
+    transition: 'background-color 0.2s ease, color 0.2s ease',
+
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+
+  variants: {
+    hasIcon: {
+      true: {
+        gap: '0.5em',
+      },
+    },
+
+    color: {
+      ...semanticColors,
+      ...scaleColors,
+    },
+
+    size: {
+      sm: {
+        height: '2.25em',
+        padding: '0 0.75em',
+      },
+
+      md: {
+        height: '2.5em',
+        padding: '0 0.875em',
+      },
+
+      lg: {
+        height: '2.75em',
+        padding: '0 1em',
+      },
+
+      'icon-sm': {
+        width: '2em',
+        height: '2em',
+      },
+
+      'icon-md': {
+        width: '2.5em',
+        height: '2.5em',
+      },
+
+      'icon-lg': {
+        width: '2.75em',
+        height: '2.75em',
+      },
+    },
+
+    variant: {
+      contained: {
+        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
+        backgroundColor: `rgb(${backgroundVar})`,
+        color: `rgb(${foregroundVar})`,
+
+        ':disabled': {
+          backgroundColor: `rgb(${theme.color.muted})`,
+
+          color: `rgb(${theme.color['muted-foreground']})`,
+
+          cursor: 'default',
+        },
+      },
+
+      outlined: {
+        boxShadow: `inset 0 0 0 1px rgb(${backgroundVar})`,
+        backgroundColor: `rgb(${theme.color.background})`,
+        color: `rgb(${theme.color.foreground})`,
+
+        ':disabled': {
+          backgroundColor: `rgb(${theme.color.muted})`,
+
+          color: `rgb(${theme.color['muted-foreground']})`,
+
+          cursor: 'default',
+        },
+      },
+
+      ghost: {
+        background: 'transparent',
+
+        color: `rgb(${theme.color.foreground})`,
+
+        ':hover': {
+          backgroundColor: `rgba(${backgroundVar}, 0.8)`,
+
+          color: `rgb(${foregroundVar})`,
+        },
+
+        ':disabled': {
+          color: `rgb(${theme.color['muted-foreground']})`,
+
+          cursor: 'default',
+        },
+      },
+
+      glass: {
+        boxShadow: `inset 0 0 0 1px rgba(255, 255, 255, 0.08)`,
+        backgroundColor: `rgba(${backgroundVar}, 0.75)`,
+        backdropFilter: 'blur(1rem)',
+
+        color: `rgb(${theme.color.foreground})`,
+
+        ':disabled': {
+          backgroundColor: `rgb(${theme.color.muted})`,
+
+          color: `rgb(${theme.color['muted-foreground']})`,
+
+          cursor: 'default',
+        },
+      },
+    },
+
+    pulse: {
+      true: {
+        '::after': {
+          content: '',
+          position: 'absolute',
+          inset: '0',
+
+          background:
+            'linear-gradient(90deg, transparent 30%, #ffffff33 65%, transparent 100%)',
+          backgroundSize: '300% 100%',
+
+          animation: `${pulse} 5s linear 0s infinite`,
+        },
+      },
+    },
+  },
+});
+
+export const icon = style({
+  lineHeight: '0',
+});
+
+globalStyle(`${icon} > *`, {
+  width: '1em',
+  height: '1em',
+  lineHeight: '0',
+
+  pointerEvents: 'none',
+});
+
+globalStyle(`${button.classNames.base} svg`, {
+  width: '1em',
+  height: '1em',
+});

package/src/components/Button/Button.spec.tsx

@@ -0,0 +1,30 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { uiTest } from '../../tests/uiTest';
+import { Button } from './';
+
+describe('Button 컴포넌트', () => {
+  uiTest(Button, 'Button');
+
+  it('Button을 클릭하면 onClick이 호출되어야 한다', () => {
+    const handleClick = jest.fn();
+    render(<Button onClick={handleClick}>Click</Button>);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Click' }));
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('disabled Button을 클릭하면 onClick이 호출되지 않아야 한다', () => {
+    const handleClick = jest.fn();
+    render(
+      <Button onClick={handleClick} disabled>
+        Click
+      </Button>,
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Click' }));
+
+    expect(handleClick).not.toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Button/index.tsx

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

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

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

@@ -0,0 +1,41 @@
+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.css.ts

@@ -0,0 +1,8 @@
+import { styleWithLayer } from '#styleUtils';
+import { spacing } from '#tokens';
+
+export const cardContent = styleWithLayer({
+  flex: '1 1 auto',
+
+  padding: spacing.md,
+});

package/src/components/Card/CardContent.tsx

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

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

package/src/components/Card/CardInteraction.tsx

@@ -0,0 +1,36 @@
+'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.css.ts

@@ -0,0 +1,6 @@
+import { styleWithLayer } from '#styleUtils';
+
+export const thumbnail = styleWithLayer({
+  width: 'auto',
+  maxWidth: '100%',
+});

package/src/components/Card/CardThumbnail.tsx

@@ -0,0 +1,23 @@
+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/Card/index.ts

@@ -0,0 +1,4 @@
+export * from './Card';
+export * from './CardContent';
+export * from './CardInteraction';
+export * from './CardThumbnail';

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

@@ -0,0 +1,75 @@
+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.spec.tsx

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