@dotss/ui 0.0.4

package/typings/utility.ts

@@ -0,0 +1,20 @@
+import type { Property } from 'csstype';
+
+export type RGB = `rgb(${number}, ${number}, ${number})`;
+export type RGBA = `rgba(${number}, ${number}, ${number}, ${number})`;
+export type HEX = `#${string}`;
+
+export type ColorCode = RGB | RGBA | HEX;
+export type ColorValue =
+  | ColorCode
+  | Property.Color
+  | `linear-gradient(${number}deg, ${ColorCode} ${number}%, ${ColorCode} ${number}%)`;
+
+export type AbsoluteUnit = 'cm' | 'mm' | 'in' | 'px' | 'pt' | 'pc';
+export type RelativeUnit = 'em' | 'ex' | 'ch' | 'rem' | 'vw' | 'vh' | 'vmin' | 'vmax' | '%';
+export type CSSValue =
+  | number
+  | string
+  | `${number}${AbsoluteUnit | RelativeUnit}`
+  | 'auto'
+  | 'inherit';

package/utils/convertNumberToCSSValue.ts

@@ -0,0 +1,12 @@
+import type { AbsoluteUnit, CSSValue, RelativeUnit } from '@typings/utility';
+
+export default function convertNumberToCSSValue(
+  value: CSSValue,
+  unit: RelativeUnit | AbsoluteUnit = 'px'
+) {
+  if (Number.isNaN(value)) {
+    return value;
+  }
+
+  return `${value}${unit}`;
+}

package/utils/debounce/debounce.ts

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default function debounce<T extends (...args: any[]) => void>(
+  func: T,
+  wait: number
+): (...args: Parameters<T>) => void {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  return (...args: Parameters<T>) => {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId);
+    }
+
+    timeoutId = setTimeout(() => {
+      func(...args);
+    }, wait);
+  };
+}

package/utils/getContrastRatio/getContrastRatio.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+
+import getContrastRatio from './getContrastRatio';
+
+describe('getContrastRatio', () => {
+  it('같은 색상의 대비 비율은 1이다.', () => {
+    expect(getContrastRatio('#000000', '#000000')).toBe(1);
+    expect(getContrastRatio('#FFFFFF', '#FFFFFF')).toBe(1);
+  });
+
+  it('검정과 흰색의 대비 비율은 21이다.', () => {
+    expect(getContrastRatio('#000000', '#FFFFFF')).toBe(21);
+  });
+
+  it('중간 톤의 색상들의 대비 비율을 계산할 수 있다.', () => {
+    expect(getContrastRatio('#808080', '#FFFFFF')).toBeCloseTo(3.95, 2);
+    expect(getContrastRatio('#808080', '#000000')).toBeCloseTo(5.32, 2);
+  });
+});

package/utils/getContrastRatio/getContrastRatio.ts

@@ -0,0 +1,12 @@
+import getRelativeLuminance from '@utils/getRelativeLuminance/getRelativeLuminance';
+import hexToRgb from '@utils/hexToRgb/hexToRgb';
+
+export default function getContrastRatio(color1: string, color2: string): number {
+  const rgb1 = hexToRgb(color1);
+  const rgb2 = hexToRgb(color2);
+  const l1 = getRelativeLuminance(rgb1.r, rgb1.g, rgb1.b);
+  const l2 = getRelativeLuminance(rgb2.r, rgb2.g, rgb2.b);
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+  return (lighter + 0.05) / (darker + 0.05);
+}

package/utils/getContrastingTextColor/getContrastingTextColor.test.ts

@@ -0,0 +1,27 @@
+import { describe, expect, it } from 'vitest';
+
+import getContrastingTextColor from './getContrastingTextColor';
+
+describe('getContrastingTextColor', () => {
+  it('어두운 배경에서는 밝은 텍스트를 반환한다.', () => {
+    expect(getContrastingTextColor('#000000')).toBe('#FFFFFF');
+    expect(getContrastingTextColor('#333333')).toBe('#FFFFFF');
+    expect(getContrastingTextColor('#18C1E7')).toBe('#FFFFFF');
+  });
+
+  it('밝은 배경에서는 어두운 텍스트를 반환한다.', () => {
+    expect(getContrastingTextColor('#FFFFFF')).toBe('#000000');
+    expect(getContrastingTextColor('#CCCCCC')).toBe('#000000');
+    expect(getContrastingTextColor('#FFC800')).toBe('#000000');
+  });
+
+  it('투명한 배경에서는 가장 어두운 텍스트를 반환한다.', () => {
+    expect(getContrastingTextColor('transparent')).toBe('#000000');
+  });
+
+  it('사용자가 정의한 텍스트 색상을 사용할 수 있다.', () => {
+    const customColors: [string, string] = ['#00FF00', '#0000FF'];
+    expect(getContrastingTextColor('#000000', customColors)).toBe('#00FF00');
+    expect(getContrastingTextColor('#FFFFFF', customColors)).toBe('#0000FF');
+  });
+});

package/utils/getContrastingTextColor/getContrastingTextColor.ts

@@ -0,0 +1,33 @@
+import getRelativeLuminance from '@utils/getRelativeLuminance/getRelativeLuminance';
+import hexToRgb from '@utils/hexToRgb/hexToRgb';
+
+const LUMINANCE_THRESHOLD = 0.57;
+
+export default function getContrastingTextColor(
+  backgroundColor: string,
+  textColors: [string, string] = ['#FFFFFF', '#000000']
+) {
+  const colorsWithLuminance = textColors
+    .map((color) => {
+      const rgb = hexToRgb(color);
+      return {
+        color,
+        luminance: getRelativeLuminance(rgb.r, rgb.g, rgb.b)
+      };
+    })
+    .sort((a, b) => a.luminance - b.luminance);
+
+  // transparent 색상이 넘어오는 경우 가장 어두운 색상을 선택
+  if (backgroundColor === 'transparent') {
+    return colorsWithLuminance[0].color;
+  }
+
+  const bgRgb = hexToRgb(backgroundColor);
+  const bgLuminance = getRelativeLuminance(bgRgb.r, bgRgb.g, bgRgb.b);
+
+  const isLightBackground = bgLuminance > LUMINANCE_THRESHOLD;
+
+  return isLightBackground
+    ? colorsWithLuminance[0].color
+    : colorsWithLuminance[colorsWithLuminance.length - 1].color;
+}

package/utils/getIconLabel/getIconLabel.ts

@@ -0,0 +1,115 @@
+import type { IconName } from '@typings/component';
+
+const IconLabel: Record<IconName, string> = Object.freeze({
+  CalendarColorLine: '달력',
+  GoodsColorLine: '상품',
+  KidsColorLine: '아이',
+  TimeColorLine: '시간',
+  CapacityColorLine: '인원',
+  AveragePlaneEmoji: '보통',
+  ExcellentPlaneEmoji: '좋음',
+  GoodPlaneEmoji: '아주 좋음',
+  CashEtc: '캐시',
+  PointEtc: '포인트',
+  CheckEtc: '체크',
+  UnScheduledEtc: '미예약',
+  CouponEtc: '쿠폰',
+  AlertFill: '경고',
+  ApplyFill: '추가',
+  ArrowDownFill: '아래쪽',
+  ArrowLeftFill: '왼쪽',
+  ArrowRightFill: '오른쪽',
+  ArrowUpFill: '위쪽',
+  ChattingFill: '채팅',
+  CompleteFill: '성공',
+  HomeFill: '홈',
+  InfoFill: '정보',
+  InvalidFill: '실패',
+  MetFill: '하트',
+  OngoingFill: '진행중',
+  ReviewFill: '별',
+  ScheduleFill: '예약',
+  TooltipFill: '정보',
+  UserFill: '사용자',
+  ClrFill: '지우기',
+  LikeFill: '좋아요',
+  ArrowBackLine: '뒤로',
+  ArrowDownwardLine: '아래로',
+  ArrowForwardLine: '앞으로',
+  ArrowUpwardLine: '위로',
+  CheckLine: '체크',
+  ChevronDownLine: '하',
+  ChevronLeftLine: '좌',
+  ChevronRightLine: '우',
+  ChevronUpLine: '상',
+  CloseLine: '닫기',
+  DownloadLine: '다운로드',
+  EyeInvisibleLine: '가리기',
+  EyeVisibleLine: '보이기',
+  HamburgerLine: '메뉴',
+  MinusLine: '빼기',
+  PlusLine: '더하기',
+  ResetLine: '초기화',
+  SearchLine: '찾기',
+  UploadLine: '업로드',
+  AlarmLine: '알림',
+  CalendarLine: '달력',
+  CertificateLine: '증명서',
+  ChatLine: '채팅',
+  DeleteLine: '삭제',
+  FullViewLine: '전체보기',
+  KidsLine: '아이',
+  LinkLine: '링크',
+  MatchTypeLine: '매칭타입',
+  MobileLine: '모바일',
+  ModifyLine: '수정',
+  SettingLine: '설정',
+  SpecialLine: '특별',
+  TimeLine: '시간',
+  UniversityLine: '학위',
+  Warning1Line: '경고',
+  Warning2Line: '경고',
+  AttachLine: '첨부',
+  BrowserLine: '브라우저',
+  CallLine: '전화',
+  CameraLine: '카메라',
+  CardLine: '카드',
+  CopyLine: '복사',
+  FilterLine: '필터',
+  GoodsLine: '상품',
+  ImgLine: '사진',
+  LocationLine: '위치',
+  InformationLine: '정보',
+  ParkingLine: '자동차',
+  ReceiptLine: '영수증',
+  ShareLine: '공유',
+  SmsLine: '메일',
+  WifiLine: '와이파이',
+  ApplyLine: '추가',
+  ChattingLine: '채팅',
+  HomeLine: '홈',
+  HeadphoneLine: '헤드폰',
+  LikeLine: '좋아요',
+  InsuranceLine: '보호',
+  ScheduleLine: '예약',
+  UserLine: '사용자',
+  MoreLine: '더보기',
+  ImgDisableLine: '사진 없음',
+  ToyLine: '장난감',
+  InstagramLine: '인스타그램',
+  AlignLine: '정렬',
+  CashLine: '캐시',
+  SoundLine: '소리 켜기',
+  SoundOffLine: '소리 끄기',
+  BanLine: '금지',
+  MetLine: '하트',
+  AlignEditLine: '순서 변경',
+  VideoCameraLine: '동영상 촬영'
+});
+
+export default function getIconLabel(name: IconName) {
+  if (IconLabel[name]) {
+    return IconLabel[name];
+  }
+  return '';
+}

package/utils/getInterpolation/getInterpolation.ts

@@ -0,0 +1,16 @@
+// linear Interpolation
+export function lerp(x: number, y: number, mid: number) {
+  return x * (1 - mid) + y * mid;
+}
+
+export function clamp(a: number, min = 0, max = 1) {
+  return Math.min(max, Math.max(min, a));
+}
+
+export function invlerp(x: number, y: number, lerpValue: number) {
+  return clamp((lerpValue - x) / (y - x));
+}
+
+export function range(x1: number, y1: number, x2: number, y2: number, a: number) {
+  return lerp(x2, y2, invlerp(x1, y1, a));
+}

package/utils/getPaletteColor/getPaletteColor.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+
+import light from '@themes/tictoccroc/parentLight';
+
+import getPaletteColor from './getPaletteColor';
+
+describe('getPaletteColor', () => {
+  it('기본 브랜드 칼라 primary, secondary 의 색상이 주어진 값과 동일하다.', () => {
+    expect(getPaletteColor('primary', { theme: light })).toBe('#FFC800');
+    expect(getPaletteColor('secondary', { theme: light })).toBe('#313135');
+  });
+
+  it('tictoccroc의 브랜드 색상이 주어진 값과 동일하다.', () => {
+    expect(getPaletteColor('tictoccroc-parent.brand.yellow', { theme: light })).toBe('#FFC800');
+    expect(getPaletteColor('tictoccroc-parent.brand.green', { theme: light })).toBe('#36BB65');
+  });
+
+  it('tictoccroc의 클래스타입에 따른 색상이 주어진 값과 동일하다.', () => {
+    expect(getPaletteColor('tictoccroc-parent.classType.commute', { theme: light })).toBe(
+      '#ECD9F4'
+    );
+    expect(getPaletteColor('tictoccroc-parent.classType.creativeArt', { theme: light })).toBe(
+      '#FFE4EF'
+    );
+  });
+});

package/utils/getPaletteColor/getPaletteColor.ts

@@ -0,0 +1,71 @@
+import type { Theme } from '@emotion/react';
+
+import type { BaseColorScaleKey, ColorScaleRange } from '@typings/color';
+import type { Color } from '@typings/component';
+import type { ThemeType } from '@typings/theme/core';
+import type {
+  TictoccrocBrandColorKey,
+  TictoccrocClassTypeColorKey
+} from '@typings/theme/tictoccroc';
+import type { ColorValue } from '@typings/utility';
+
+export default function getPaletteColor(value: Color, { theme }: { theme: Theme }) {
+  const { palette } = theme;
+
+  let colorValue: ColorValue | undefined;
+
+  if (value === 'primary') {
+    colorValue = palette?.brand.primary.main;
+  }
+
+  if (value === 'secondary') {
+    colorValue = palette?.brand[value];
+  }
+
+  if (value.includes('.')) {
+    const splitValue = value.split('.');
+
+    if (splitValue.length === 2) {
+      const [key, range] = splitValue as [key: BaseColorScaleKey, range: ColorScaleRange];
+
+      colorValue = palette?.[key]?.[range];
+    }
+    if (splitValue.length === 3) {
+      const [type, key, colorKey] = splitValue as [
+        type: ThemeType,
+        string,
+        key: string,
+        colorKey: string
+      ];
+
+      switch (type) {
+        case 'tictoccroc-parent':
+          if (key === 'brand') {
+            colorValue = palette?.brand?.extend?.[colorKey as TictoccrocBrandColorKey];
+          }
+
+          if (key === 'classType') {
+            colorValue = palette?.extend?.classType?.[colorKey as TictoccrocClassTypeColorKey];
+          }
+          break;
+        case 'tictoccroc-teacher':
+          if (key === 'brand') {
+            colorValue = palette?.brand?.extend?.[colorKey as TictoccrocBrandColorKey];
+          }
+
+          if (key === 'classType') {
+            colorValue = palette?.extend?.classType?.[colorKey as TictoccrocClassTypeColorKey];
+          }
+          break;
+        default:
+          break;
+      }
+    }
+
+    return colorValue;
+  }
+
+  colorValue = colorValue || palette.brand.primary.main;
+
+  return colorValue;
+}

package/utils/getRelativeLuminance/getRelativeLuminance.test.ts

@@ -0,0 +1,23 @@
+import { describe, expect, it } from 'vitest';
+
+import getRelativeLuminance from './getRelativeLuminance';
+
+describe('getRelativeLuminance', () => {
+  it('검정색의 상대 명도는 0이다.', () => {
+    expect(getRelativeLuminance(0, 0, 0)).toBe(0);
+  });
+
+  it('흰색의 상대 명도는 1이다.', () => {
+    expect(getRelativeLuminance(255, 255, 255)).toBe(1);
+  });
+
+  it('회색의 상대 명도를 계산할 수 있다.', () => {
+    expect(getRelativeLuminance(128, 128, 128)).toBeCloseTo(0.216, 3);
+  });
+
+  it('색상별 상대 명도를 계산할 수 있다.', () => {
+    expect(getRelativeLuminance(255, 0, 0)).toBeCloseTo(0.213, 3);
+    expect(getRelativeLuminance(0, 255, 0)).toBeCloseTo(0.715, 3);
+    expect(getRelativeLuminance(0, 0, 255)).toBeCloseTo(0.072, 3);
+  });
+});

package/utils/getRelativeLuminance/getRelativeLuminance.ts

@@ -0,0 +1,7 @@
+export default function getRelativeLuminance(r: number, g: number, b: number) {
+  const [rs, gs, bs] = [r, g, b].map((color) => {
+    const s = color / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}

package/utils/getSibling/getSibling.ts

@@ -0,0 +1,27 @@
+interface GetSiblingOption {
+  skipDisabled?: boolean;
+}
+
+export default function getSibling(
+  element: HTMLElement | null,
+  direction: 'next' | 'prev',
+  option?: GetSiblingOption
+) {
+  if (!element) return null;
+
+  const sibling =
+    direction === 'next' ? element.nextElementSibling : element.previousElementSibling;
+
+  if (!sibling) return null;
+  if (!(sibling instanceof HTMLElement)) return null;
+
+  if (
+    option?.skipDisabled &&
+    sibling.hasAttribute('disabled') &&
+    !(sibling as HTMLInputElement)?.disabled
+  ) {
+    return getSibling(sibling, direction, option);
+  }
+
+  return sibling;
+}

package/utils/hexToRgb/hexToRgb.test.ts

@@ -0,0 +1,28 @@
+import { describe, expect, it } from 'vitest';
+
+import hexToRgb from './hexToRgb';
+
+describe('hexToRgb', () => {
+  it('6자리 HEX 코드를 RGB로 변환할 수 있다.', () => {
+    expect(hexToRgb('#FF0000')).toEqual({ r: 255, g: 0, b: 0 });
+    expect(hexToRgb('#00FF00')).toEqual({ r: 0, g: 255, b: 0 });
+    expect(hexToRgb('#0000FF')).toEqual({ r: 0, g: 0, b: 255 });
+  });
+
+  it('3자리 HEX 코드를 RGB로 변환할 수 있다.', () => {
+    expect(hexToRgb('#F00')).toEqual({ r: 255, g: 0, b: 0 });
+    expect(hexToRgb('#0F0')).toEqual({ r: 0, g: 255, b: 0 });
+    expect(hexToRgb('#00F')).toEqual({ r: 0, g: 0, b: 255 });
+  });
+
+  it('# 기호가 없는 HEX 코드도 처리할 수 있다.', () => {
+    expect(hexToRgb('FF0000')).toEqual({ r: 255, g: 0, b: 0 });
+    expect(hexToRgb('00FF00')).toEqual({ r: 0, g: 255, b: 0 });
+    expect(hexToRgb('0000FF')).toEqual({ r: 0, g: 0, b: 255 });
+  });
+
+  it('잘못된 HEX 코드는 {r: 0, g: 0, b: 0}을 반환한다.', () => {
+    expect(hexToRgb('invalid')).toEqual({ r: 0, g: 0, b: 0 });
+    expect(hexToRgb('#GGGGGG')).toEqual({ r: 0, g: 0, b: 0 });
+  });
+});

package/utils/hexToRgb/hexToRgb.ts

@@ -0,0 +1,15 @@
+export default function hexToRgb(hex: string) {
+  let tempHex = hex;
+  if (hex.length === 4) {
+    tempHex = `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}`;
+  }
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(tempHex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16)
+      }
+    : { r: 0, g: 0, b: 0 };
+}

package/vite.config.mts

@@ -0,0 +1,188 @@
+/// <reference types="vitest" />
+
+import path, { dirname, join, relative, resolve } from 'path';
+
+import { glob } from 'glob';
+import { visualizer } from 'rollup-plugin-visualizer';
+import { defineConfig } from 'vite';
+
+import dts from 'vite-plugin-dts';
+import svgr from 'vite-plugin-svgr';
+
+import packageJson from './package.json';
+
+const entries = [
+  {
+    entry: 'index.ts',
+    dir: '',
+    pullUpDir: false
+  },
+  {
+    entry: 'components/**/*.{ts,tsx}',
+    dir: 'components',
+    pullUpDir: true
+  },
+  {
+    entry: 'core/**/*.{ts,tsx}',
+    dir: 'core',
+    pullUpDir: false
+  },
+  {
+    entry: 'hooks/**/*.{ts,tsx}',
+    dir: 'hooks',
+    pullUpDir: false
+  },
+  {
+    entry: 'themes/**/*.{ts,tsx}',
+    dir: 'themes',
+    pullUpDir: false
+  },
+  {
+    entry: 'utils/**/*.{ts,tsx}',
+    dir: 'utils',
+    pullUpDir: false
+  }
+];
+
+let componentsIndexContent = '';
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: entries
+        .map(({ entry }) =>
+          glob
+            .sync(resolve(__dirname, entry), {
+              ignore: [
+                'components/index.ts',
+                '**/*.d.ts',
+                '**/*.styles.{ts,tsx}',
+                '**/*.stories.tsx',
+                '**/*.test.{ts,tsx}'
+              ]
+            })
+            .flat()
+        )
+        .flat(),
+      name: 'thedotscorp-ui'
+    },
+    rollupOptions: {
+      external: [...Object.keys(packageJson.peerDependencies), /@emotion/g],
+      output: [
+        {
+          interop: 'auto',
+          format: 'cjs',
+          exports: 'named',
+          manualChunks: (id) => {
+            if (id.includes('resources')) {
+              return id.slice(id.lastIndexOf('resources'), id.length);
+            }
+
+            return undefined;
+          },
+          entryFileNames: (entry) => {
+            const { name, facadeModuleId } = entry;
+            const fileName = `${name}.cjs`;
+            if (!facadeModuleId) {
+              return fileName;
+            }
+            let relativeDir = relative(resolve(__dirname), dirname(facadeModuleId));
+            if (!relativeDir.endsWith('components')) {
+              relativeDir = relativeDir.replace('components/', '');
+            }
+            return join(relativeDir, fileName);
+          }
+        },
+        {
+          interop: 'auto',
+          format: 'es',
+          manualChunks: (id) => {
+            if (id.includes('resources')) {
+              return id.slice(id.lastIndexOf('resources'), id.length);
+            }
+
+            return undefined;
+          },
+          entryFileNames: (entry) => {
+            const { name, facadeModuleId } = entry;
+            const fileName = `${name}.es.js`;
+            if (!facadeModuleId) {
+              return fileName;
+            }
+            let relativeDir = relative(resolve(__dirname), dirname(facadeModuleId));
+            if (!relativeDir.endsWith('components')) {
+              relativeDir = relativeDir.replace('components/', '');
+            }
+            return join(relativeDir, fileName);
+          }
+        }
+      ]
+    }
+  },
+  plugins: [
+    dts({
+      beforeWriteFile: (filePath, content) => {
+        let filePathProcessed = filePath;
+        let contentProcessed = content;
+
+        if (filePathProcessed.endsWith('/typings/component.d.ts')) {
+          contentProcessed = contentProcessed.replace(
+            /@resources/g,
+            relative(path.dirname(filePath), resolve(__dirname, 'dist/resources'))
+          );
+        }
+
+        if (filePathProcessed.endsWith('/components/index.d.ts')) {
+          componentsIndexContent = contentProcessed;
+        }
+
+        if (filePathProcessed.endsWith('dist/index.d.ts')) {
+          return {
+            filePath: filePathProcessed,
+            content: componentsIndexContent + contentProcessed
+          };
+        }
+
+        entries.forEach(({ dir, pullUpDir }) => {
+          if (pullUpDir) {
+            filePathProcessed = filePathProcessed.replace(`/${dir}`, '');
+            // eslint-disable-next-line
+            contentProcessed = contentProcessed.replace(/from '\.\.\/\.\.\//g, "from '../");
+          }
+        });
+
+        return {
+          filePath: filePathProcessed,
+          content: contentProcessed
+        };
+      }
+    }),
+    svgr({
+      include: '**/*.svg'
+    }),
+    ...(process.env.ANALYZE_PACKAGE === 'true' ? [visualizer({ open: true })] : [])
+  ],
+  resolve: {
+    extensions: ['.mdx', '.mjs', '.js', '.tsx', '.ts'],
+    alias: entries
+      .map(({ dir }) => ({
+        find: `@${dir}`,
+        replacement: path.resolve(__dirname, dir)
+      }))
+      .concat({
+        find: '@resources',
+        replacement: path.resolve(__dirname, 'resources')
+      })
+      .concat({
+        find: '@typings',
+        replacement: path.resolve(__dirname, 'typings')
+      })
+  },
+  test: {
+    globals: true,
+    reporters: process.env.GITHUB_ACTIONS ? ['dot', 'github-actions'] : ['dot'],
+    environment: 'jsdom',
+    setupFiles: './vitest.setup.ts',
+    include: ['**/?(*.)test.tsx', '**/?(*.)test.ts']
+  }
+});

package/vitest.setup.ts

@@ -0,0 +1,7 @@
+import '@testing-library/jest-dom';
+
+import { setProjectAnnotations } from '@storybook/react';
+
+import projectAnnotations from './.storybook/preview';
+
+setProjectAnnotations(projectAnnotations);