@kimdw-rtk/ui 0.0.0

package/src/components/Tabs/Tabs.spec.tsx

@@ -0,0 +1,46 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '.';
+import { uiTest } from '../../tests/uiTest';
+
+describe('Tabs 컴포넌트', () => {
+  uiTest(Tabs, 'Tabs');
+  uiTest(TabsList, 'TabsList');
+
+  it('TabsTrigger를 클릭하면 해당하는 value의 Content를 보여준다.', () => {
+    render(
+      <Tabs>
+        <TabsList>
+          <TabsTrigger value={1}>Trigger1</TabsTrigger>
+          <TabsTrigger value={2}>Trigger2</TabsTrigger>
+        </TabsList>
+        <TabsContent value={1}>Content1</TabsContent>
+        <TabsContent value={2}>Content2</TabsContent>
+      </Tabs>,
+    );
+
+    fireEvent.click(screen.getByText('Trigger1'));
+    expect(screen.queryByText('Content1')).toBeInTheDocument();
+    expect(screen.queryByText('Content2')).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByText('Trigger2'));
+    expect(screen.queryByText('Content1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Content2')).toBeInTheDocument();
+  });
+
+  it('defaultValue에 해당하는 Content를 기본적으로 보여준다.', () => {
+    render(
+      <Tabs defaultValue={2}>
+        <TabsList>
+          <TabsTrigger value={1}>Trigger1</TabsTrigger>
+          <TabsTrigger value={2}>Trigger2</TabsTrigger>
+        </TabsList>
+        <TabsContent value={1}>Content1</TabsContent>
+        <TabsContent value={2}>Content2</TabsContent>
+      </Tabs>,
+    );
+
+    expect(screen.queryByText('Content1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Content2')).toBeInTheDocument();
+  });
+});

package/src/components/Tabs/Tabs.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import { forwardRef, useReducer } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import { TabsContext, tabsReducer } from './TabsProvider';
+
+interface TabsProps extends UIComponent<'div'> {
+  defaultValue?: number | string;
+}
+
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(
+  ({ children, defaultValue, className, sx: propSx, ...props }, ref) => {
+    const [value, setValue] = useReducer(tabsReducer, defaultValue);
+
+    return (
+      <TabsContext.Provider value={{ value, setValue }}>
+        <div
+          ref={ref}
+          className={clsx(className, sx(propSx))}
+          style={{ width: '100%' }}
+          {...props}
+        >
+          {children}
+        </div>
+      </TabsContext.Provider>
+    );
+  },
+);
+Tabs.displayName = 'Tabs';

package/src/components/Tabs/TabsContent.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import { forwardRef, useContext, type ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import { TabsContext } from './TabsProvider';
+
+interface TabsContentProps extends UIComponent<'div'> {
+  children: ReactNode;
+  value: string | number;
+}
+
+export const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
+  ({ value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = useContext(TabsContext);
+
+    if (tabsContext === undefined) {
+      throw new Error('TabsContext must be used within a Tabs.');
+    }
+
+    if (tabsContext.value !== value) {
+      return null;
+    }
+
+    return <div ref={ref} className={clsx(className, sx(propSx))} {...props} />;
+  },
+);
+TabsContent.displayName = 'TabsContent';

package/src/components/Tabs/TabsList.css.ts

@@ -0,0 +1,11 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+export const container = styleWithLayer({
+  display: 'flex',
+
+  height: '2.5em',
+
+  boxShadow: `inset 0 -0.125em 0 rgb(${theme.color.muted})`,
+  backgroundColor: `rgb(${theme.color.background})`,
+});

package/src/components/Tabs/TabsList.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 './TabsList.css';
+
+type TabsListProps = UIComponent<'div'>;
+
+export const TabsList = forwardRef<HTMLDivElement, TabsListProps>(
+  ({ children, className, sx: propSx, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(className, s.container, sx(propSx))}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+TabsList.displayName = 'TabsList';

package/src/components/Tabs/TabsProvider.tsx

@@ -0,0 +1,17 @@
+'use client';
+
+import { createContext, type Dispatch } from 'react';
+
+interface TabsContext {
+  value: number | string | undefined;
+  setValue: Dispatch<number | string>;
+}
+
+export const TabsContext = createContext<TabsContext | undefined>(undefined);
+
+export const tabsReducer = (
+  _: TabsContext['value'],
+  value: TabsContext['value'],
+) => {
+  return value;
+};

package/src/components/Tabs/TabsTrigger.css.ts

@@ -0,0 +1,38 @@
+import { recipeWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+export const container = recipeWithLayer({
+  base: {
+    overflow: 'hidden',
+
+    height: '100%',
+    padding: '0 0.75em',
+    border: '0',
+    borderBottom: `0.125rem solid`,
+
+    backgroundColor: 'transparent',
+
+    fontSize: '1em',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+
+    transition: 'border-bottom-color 0.15s ease, color 0.15s ease',
+
+    cursor: 'pointer',
+  },
+
+  variants: {
+    isSelected: {
+      true: {
+        borderBottomColor: `rgb(${theme.color.foreground})`,
+
+        color: `rgb(${theme.color.foreground})`,
+      },
+      false: {
+        borderBottomColor: 'transparent',
+
+        color: `rgb(${theme.color['muted-foreground']})`,
+      },
+    },
+  },
+});

package/src/components/Tabs/TabsTrigger.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { forwardRef, useContext } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import { TabsContext } from './TabsProvider';
+import * as s from './TabsTrigger.css';
+
+interface TabsTriggerProps extends UIComponent<'button'> {
+  value: number | string;
+}
+
+export const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
+  ({ children, value, className, sx: propSx, ...props }, ref) => {
+    const tabsContext = useContext(TabsContext);
+
+    if (tabsContext === undefined) {
+      throw new Error('TabsTrigger must be used within a Tabs.');
+    }
+
+    const isSelected = tabsContext.value === value;
+
+    const handleClick = () => {
+      tabsContext.setValue(value);
+    };
+
+    return (
+      <button
+        ref={ref}
+        className={clsx(className, s.container({ isSelected }), sx(propSx))}
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  },
+);
+TabsTrigger.displayName = 'TabsTrigger';

package/src/components/Tabs/index.ts

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

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

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

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

package/src/components/TextField/index.tsx

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

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

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

package/src/components/Toast/index.tsx

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

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

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

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

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

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

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