@kimdw-rtk/ui 0.0.0

package/src/components/Select/SelectContext.ts

@@ -0,0 +1,59 @@
+import { createContext, type Dispatch, type ReactNode } from 'react';
+
+type SelectState = {
+  isActive: boolean;
+  selected?: string;
+  defaultValue?: string;
+  items: Map<string, ReactNode>;
+  containerRef: React.RefObject<HTMLDivElement | null>;
+};
+
+type SelectAction =
+  | { type: 'ADD'; payload: { value: string; children: ReactNode } }
+  | { type: 'REMOVE'; payload: { value: string } }
+  | { type: 'SELECT'; payload: { value: string } }
+  | { type: 'TOGGLE' };
+
+export const SelectContext = createContext<
+  { state: SelectState; dispatch: Dispatch<SelectAction> } | undefined
+>(undefined);
+
+export const selectReducer = (
+  state: SelectState,
+  action: SelectAction,
+): SelectState => {
+  switch (action.type) {
+    case 'ADD': {
+      // 현재 selected가 없고, defaultValue === payload.value일 경우 select함.
+      if (
+        state.selected === undefined &&
+        state.defaultValue === action.payload.value
+      ) {
+        return {
+          ...state,
+          selected: action.payload.value,
+          items: new Map(state.items).set(
+            action.payload.value,
+            action.payload.children,
+          ),
+        };
+      }
+      return {
+        ...state,
+        items: new Map(state.items).set(
+          action.payload.value,
+          action.payload.children,
+        ),
+      };
+    }
+    case 'REMOVE': {
+      const newMap = new Map(state.items);
+      newMap.delete(action.payload.value);
+      return { ...state, items: newMap };
+    }
+    case 'SELECT':
+      return { ...state, isActive: false, selected: action.payload.value };
+    case 'TOGGLE':
+      return { ...state, isActive: !state.isActive };
+  }
+};

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

@@ -0,0 +1,14 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+export const selectOption = styleWithLayer({
+  padding: '0.75em 0.5em',
+
+  transition: 'background-color 0.2s ease',
+
+  cursor: 'default',
+
+  ':hover': {
+    backgroundColor: `rgb(${theme.color.accent})`,
+  },
+});

package/src/components/Select/SelectOption.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import { useContext, useEffect, type ReactNode } from 'react';
+
+import { SelectContext } from './SelectContext';
+import * as s from './SelectOption.css';
+
+interface SelectOptionProps {
+  children: ReactNode;
+  value: string;
+}
+
+export const SelectOption = ({ children, value }: SelectOptionProps) => {
+  const selectContext = useContext(SelectContext);
+
+  if (!selectContext) {
+    throw new Error('SelectOption must be rendered within a Select.');
+  }
+
+  const { dispatch } = selectContext;
+
+  useEffect(() => {
+    dispatch({ type: 'ADD', payload: { value, children } });
+
+    return () => {
+      dispatch({ type: 'REMOVE', payload: { value } });
+    };
+    // eslint-disable-next-line
+  }, [dispatch, value]);
+
+  const handleClick = () => {
+    dispatch({ type: 'SELECT', payload: { value } });
+  };
+
+  return (
+    <div className={s.selectOption} onClick={handleClick}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,68 @@
+import { keyframes } from '@vanilla-extract/css';
+
+import { recipeWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+const fadeIn = keyframes({
+  '0%': {
+    transform: 'scale(0.95)',
+    opacity: 0,
+  },
+
+  '100%': {
+    transform: 'scale(1)',
+    opacity: 1,
+  },
+});
+
+export const container = recipeWithLayer({
+  base: {
+    overflowY: 'auto',
+    position: 'absolute',
+    zIndex: '10',
+
+    width: '100%',
+    minWidth: 'max-content',
+    border: `1px solid rgb(${theme.color.border})`,
+    borderRadius: theme.borderRadius,
+    margin: '0.5rem 0',
+
+    backgroundColor: `rgb(${theme.color.background})`,
+
+    animation: `${fadeIn} 0.3s ease 1`,
+    transformOrigin: '0 0',
+
+    userSelect: 'none',
+
+    '::-webkit-scrollbar': {
+      width: '0.25rem',
+      height: '0.25rem',
+    },
+
+    '::-webkit-scrollbar-thumb': {
+      borderRadius: '0.5rem',
+
+      backgroundColor: `rgb(${theme.color['muted-foreground']})`,
+    },
+  },
+
+  variants: {
+    isVisible: {
+      true: {
+        display: 'block',
+      },
+      false: {
+        display: 'none',
+      },
+    },
+
+    isAbove: {
+      true: {
+        top: '100%',
+      },
+      false: {
+        bottom: '100%',
+      },
+    },
+  },
+});

package/src/components/Select/SelectOptionList.tsx

@@ -0,0 +1,59 @@
+import { useContext, useMemo, useRef, type ReactNode } from 'react';
+
+import clsx from 'clsx';
+
+import { sprinkles } from '#styles';
+
+import { SelectContext } from './SelectContext';
+import * as s from './SelectOptionList.css';
+
+interface SelectOptionListProps {
+  children: ReactNode;
+}
+
+const SelectOptionList = ({ children }: SelectOptionListProps) => {
+  const selectContext = useContext(SelectContext);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  if (!selectContext) {
+    throw new Error('SelectOption must be rendered within a Select.');
+  }
+
+  const { state } = selectContext;
+
+  const isAbove = useMemo(() => {
+    const container = containerRef.current;
+    const parent = state.containerRef.current;
+
+    if (!state.isActive || !container || !parent) {
+      return;
+    }
+
+    const parentRect = parent.getBoundingClientRect();
+    container.style.display = 'block';
+    const containerRect = container.getBoundingClientRect();
+    container.style.display = '';
+
+    // 하단에 리스트를 모두 보여줄 공간이 충분한 경우
+    if (containerRect.top + containerRect.height < window.innerHeight) {
+      return true;
+    }
+
+    // 그렇지 않으면 parent의 상단/하단 중 공간이 더 넓은 쪽으로 리스트를 보여줌
+    return parentRect.top + parentRect.height / 2 < window.innerHeight / 2;
+  }, [state.isActive, state.containerRef]);
+
+  return (
+    <div
+      ref={containerRef}
+      className={clsx(
+        s.container({ isVisible: state.isActive, isAbove }),
+        sprinkles({ boxShadow: 'accent-sm' }),
+      )}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default SelectOptionList;

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

@@ -0,0 +1,73 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+import { theme } from '#themes';
+
+export const children = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
+export const icon = recipe({
+  base: {
+    flexShrink: '0',
+
+    lineHeight: '0',
+
+    transition: 'color 0.2s ease, transform 0.2s ease',
+  },
+
+  variants: {
+    isActive: {
+      false: {
+        transform: 'rotate(0)',
+      },
+      true: {
+        color: `rgb(${theme.color.primary})`,
+
+        transform: 'rotate(-180deg)',
+      },
+    },
+  },
+});
+
+export const selectTrigger = recipe({
+  base: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.5em',
+    justifyContent: 'space-between',
+
+    width: '100%',
+
+    transition: 'border-color 0.2s ease',
+
+    cursor: 'pointer',
+    userSelect: 'none',
+  },
+
+  variants: {
+    isActive: {
+      true: {
+        borderColor: `rgb(${theme.color.primary})`,
+      },
+    },
+    variant: {
+      contained: {
+        padding: '0.75em 0.75em',
+        borderRadius: theme.borderRadius,
+
+        backgroundColor: `rgb(${theme.color.secondary})`,
+      },
+      outlined: {
+        padding: '0.75em 0.5em',
+        border: '1px solid',
+        borderColor: `rgb(${theme.color.border})`,
+        borderRadius: theme.borderRadius,
+
+        backgroundColor: `rgb(${theme.color.background})`,
+      },
+    },
+  },
+});

package/src/components/Select/SelectTrigger.tsx

@@ -0,0 +1,49 @@
+import { useContext } from 'react';
+
+import clsx from 'clsx';
+import { ChevronDownIcon } from 'lucide-react';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import { SelectContext } from './SelectContext';
+import * as s from './SelectTrigger.css';
+
+type SelectTriggerProps = UIComponent<'div', typeof s.selectTrigger>;
+
+const SelectTrigger = ({
+  children,
+  className,
+  variant,
+  sx: propSx,
+}: SelectTriggerProps) => {
+  const selectContext = useContext(SelectContext);
+
+  if (!selectContext) {
+    throw new Error('SelectTrigger must be rendered within a Select.');
+  }
+
+  const { state, dispatch } = selectContext;
+
+  const handleClick = () => {
+    dispatch({ type: 'TOGGLE' });
+  };
+
+  return (
+    <div
+      className={clsx(
+        s.selectTrigger({ isActive: state.isActive, variant }),
+        className,
+        sx(propSx),
+      )}
+      onClick={handleClick}
+    >
+      <span className={s.children}>{children}</span>
+      <span className={s.icon({ isActive: state.isActive })}>
+        <ChevronDownIcon size="1em" strokeWidth="2px" />
+      </span>
+    </div>
+  );
+};
+
+export default SelectTrigger;

package/src/components/Select/index.tsx

@@ -0,0 +1,2 @@
+export * from './Select';
+export * from './SelectOption';

package/src/components/Skeleton/Skeleton.css.ts

@@ -0,0 +1,26 @@
+import { keyframes } from '@vanilla-extract/css';
+
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+const shimmer = keyframes({
+  '0%': {
+    backgroundPosition: '-300% 0',
+  },
+
+  '100%': {
+    backgroundPosition: '300% 0',
+  },
+});
+
+export const skeleton = styleWithLayer({
+  display: 'block',
+
+  maxWidth: '100%',
+  borderRadius: theme.borderRadius,
+
+  background: `linear-gradient(90deg, rgba(${theme.color.accent}, 0.4) 30%, rgba(${theme.color.accent}, 0.2) 65%, rgba(${theme.color.accent}, 0.4))`,
+  backgroundSize: '300% 100%',
+
+  animation: `${shimmer} 5s linear 0s infinite`,
+});

package/src/components/Skeleton/Skeleton.spec.tsx

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

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,27 @@
+import { forwardRef, type CSSProperties } from 'react';
+
+import { clsx } from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './Skeleton.css';
+
+interface SkeletonProps extends UIComponent<'div'> {
+  width?: CSSProperties['width'];
+  height?: CSSProperties['height'];
+}
+
+export const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(
+  ({ className, width, height, style, sx: propSx, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={clsx(s.skeleton, className, sx(propSx))}
+        style={{ ...style, width, height }}
+        {...props}
+      />
+    );
+  },
+);
+Skeleton.displayName = 'Skeleton';

package/src/components/Table/Table.css.ts

@@ -0,0 +1,10 @@
+import { styleWithLayer } from '#styleUtils';
+
+export const table = styleWithLayer({
+  width: '100%',
+
+  tableLayout: 'fixed',
+  borderSpacing: '0',
+});
+
+export const striped = styleWithLayer({});

package/src/components/Table/Table.spec.tsx

@@ -0,0 +1,12 @@
+import { Table } from '#components';
+
+import { uiTest } from '../../tests/uiTest';
+
+describe('Table 컴포넌트', () => {
+  uiTest(Table, 'Table');
+  // uiTest(TableBody, 'TableBody');
+  // uiTest(TableCell, 'TableCell');
+  // uiTest(TableHead, 'TableHead');
+  // uiTest(TableHeader, 'TableHeader');
+  // uiTest(TableRow, 'TableRow');
+});

package/src/components/Table/Table.tsx

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './Table.css';
+
+interface TableProps extends UIComponent<'table'> {
+  isStriped?: boolean;
+}
+
+export const Table = forwardRef<HTMLTableElement, TableProps>(
+  ({ isStriped, className, sx: propSx, ...props }, ref) => {
+    return (
+      <table
+        ref={ref}
+        className={clsx(s.table, isStriped && s.striped, sx(propSx), className)}
+        {...props}
+      />
+    );
+  },
+);
+Table.displayName = 'Table';
+
+export { s as tableCss };

package/src/components/Table/TableBody.tsx

@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+type TableBodyProps = UIComponent<'tbody'>;
+
+export const TableBody = ({
+  className,
+  sx: propSx,
+  ...props
+}: TableBodyProps) => {
+  return <tbody className={clsx(className, sx(propSx))} {...props} />;
+};

package/src/components/Table/TableCell.css.ts

@@ -0,0 +1,43 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+import { striped } from './Table.css';
+import { interactive } from './TableRow.css';
+
+export const tableCell = styleWithLayer({
+  padding: '0.5em',
+
+  transition: 'background-color 0.1s ease, color 0.1s ease',
+
+  selectors: {
+    [`${interactive} > &`]: {
+      cursor: 'pointer',
+    },
+
+    'tr > &:first-child': {
+      borderTopLeftRadius: theme.borderRadius,
+      borderBottomLeftRadius: theme.borderRadius,
+    },
+
+    'tr > &:last-child': {
+      borderTopRightRadius: theme.borderRadius,
+      borderBottomRightRadius: theme.borderRadius,
+    },
+
+    'tbody > tr:hover > &': {
+      backgroundColor: `rgb(${theme.color.accent})`,
+
+      color: `rgb(${theme.color['accent-foreground']})`,
+    },
+
+    [`${striped} > tbody > tr:nth-of-type(odd) > &`]: {
+      backgroundColor: `rgb(${theme.color.card})`,
+
+      color: `rgb(${theme.color['accent-foreground']})`,
+    },
+
+    [`${striped} > tbody > tr:nth-of-type(odd):hover > &`]: {
+      backgroundColor: `rgb(${theme.color.accent})`,
+    },
+  },
+});

package/src/components/Table/TableCell.tsx

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './TableCell.css';
+
+interface TableCellProps extends UIComponent<'td'> {
+  width?: CSSProperties['width'];
+  textAlign?: CSSProperties['textAlign'];
+}
+
+export const TableCell = ({
+  width,
+  textAlign,
+  style,
+  className,
+  sx: propSx,
+  ...props
+}: TableCellProps) => {
+  return (
+    <td
+      style={{ ...style, width, textAlign }}
+      className={clsx(s.tableCell, className, sx(propSx))}
+      {...props}
+    />
+  );
+};

package/src/components/Table/TableHead.css.ts

@@ -0,0 +1,10 @@
+import { styleWithLayer } from '#styleUtils';
+import { theme } from '#themes';
+
+export const tableHead = styleWithLayer({
+  padding: '0.5em 0.625em',
+
+  color: `rgb(${theme.color['accent-foreground']})`,
+  fontSize: '0.9375em',
+  fontWeight: '500',
+});

package/src/components/Table/TableHead.tsx

@@ -0,0 +1,30 @@
+import { type CSSProperties } from 'react';
+
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './TableHead.css';
+
+interface TableHeadProps extends UIComponent<'th'> {
+  width?: CSSProperties['width'];
+  textAlign?: CSSProperties['textAlign'];
+}
+
+export const TableHead = ({
+  width,
+  textAlign,
+  style,
+  className,
+  sx: propSx,
+  ...props
+}: TableHeadProps) => {
+  return (
+    <th
+      style={{ ...style, width, textAlign }}
+      className={clsx(s.tableHead, className, sx(propSx))}
+      {...props}
+    />
+  );
+};

package/src/components/Table/TableHeader.tsx

@@ -0,0 +1,14 @@
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+type TableHeaderProps = UIComponent<'thead'>;
+
+export const TableHeader = ({
+  className,
+  sx: propSx,
+  ...props
+}: TableHeaderProps) => {
+  return <thead className={clsx(className, sx(propSx))} {...props} />;
+};

package/src/components/Table/TableRow.css.ts

@@ -0,0 +1,3 @@
+import { styleWithLayer } from '#styleUtils';
+
+export const interactive = styleWithLayer({});

package/src/components/Table/TableRow.tsx

@@ -0,0 +1,24 @@
+import clsx from 'clsx';
+
+import { sx } from '#styles';
+import type { UIComponent } from '#types';
+
+import * as s from './TableRow.css';
+
+interface TableRowProps extends UIComponent<'tr'> {
+  isInteractive?: boolean;
+}
+
+export const TableRow = ({
+  isInteractive = false,
+  className,
+  sx: propSx,
+  ...props
+}: TableRowProps) => {
+  return (
+    <tr
+      className={clsx(isInteractive && s.interactive, className, sx(propSx))}
+      {...props}
+    />
+  );
+};

package/src/components/Table/index.ts

@@ -0,0 +1,6 @@
+export * from './Table';
+export * from './TableBody';
+export * from './TableCell';
+export * from './TableHead';
+export * from './TableHeader';
+export * from './TableRow';