@dotss/ui 1.0.2 → 1.0.3

package/typings/theme/tictoccroc.ts

@@ -0,0 +1,29 @@
+import type BaseTheme from '@typings/theme/core';
+import type { ColorValue } from '@typings/utility';
+
+export type TictoccrocClassTypeColorKey =
+  | 'play'
+  | 'commute'
+  | 'learning'
+  | 'creativeArt'
+  | 'english'
+  | 'package';
+
+export type TictoccrocClassType = {
+  [key in TictoccrocClassTypeColorKey]: ColorValue;
+};
+
+export type TictoccrocBrandColorKey = 'yellow' | 'blue' | 'green' | 'pink';
+
+export type TictoccrocBrandColor = {
+  [key in TictoccrocBrandColorKey]: ColorValue;
+};
+
+type TictoccrocTheme = BaseTheme<
+  {
+    classType: TictoccrocClassType;
+  },
+  TictoccrocBrandColor
+>;
+
+export default TictoccrocTheme;

package/typings/typography.ts

@@ -0,0 +1,30 @@
+import type { CSSValue } from '@typings/utility';
+
+type TypographyWeightKey = 'B' | 'M' | 'R';
+type TypographyWeight = 700 | 500 | 400;
+type TypographySizeRange = 0 | 1 | 2 | 3 | 4 | 5;
+type TypographyVariantKey = 'd' | 'h' | 'b' | 'c';
+
+export type TypographyContent = {
+  tag: `h${1 | 2 | 3 | 4 | 5}` | 'div' | 'span';
+  size: CSSValue;
+  weight: TypographyWeight;
+  lineHeight: CSSValue;
+  letterSpacing: CSSValue;
+};
+
+export type TypographyVariant<
+  Key extends TypographyVariantKey = TypographyVariantKey,
+  SizeRange extends TypographySizeRange = TypographySizeRange,
+  WeightKey extends TypographyWeightKey = TypographyWeightKey
+> = `${Extract<TypographyVariantKey, Key>}${Extract<TypographySizeRange, SizeRange>}${Extract<TypographyWeightKey, WeightKey>}`;
+
+export type TypographyDisplayKey = TypographyVariant<'d', 1 | 2 | 3 | 4, 'B' | 'M' | 'R'>;
+export type TypographyHeadlineKey = TypographyVariant<'h', 0 | 1 | 2 | 3 | 4 | 5, 'B' | 'M' | 'R'>;
+export type TypographyBodyKey = TypographyVariant<'b', 1 | 2 | 3 | 4 | 5, 'M' | 'R'>;
+export type TypographyCaptionKey = TypographyVariant<'c', 1 | 2 | 3 | 4 | 5>;
+
+export type TypographyDisplay = Record<TypographyDisplayKey, TypographyContent>;
+export type TypographyHeadline = Record<TypographyHeadlineKey, TypographyContent>;
+export type TypographyBody = Record<TypographyBodyKey, TypographyContent>;
+export type TypographyCaption = Record<TypographyCaptionKey, TypographyContent>;

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,128 @@
+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: '동영상 촬영',
+  CertifiedFill: '인증됨',
+  LocationFill: '위치',
+  SendFill: '보내기',
+  ReviewLine: '리뷰',
+  ListLine: '목록',
+  MonthlyLine: '월간 보기',
+  WeeklyLine: '주간 보기',
+  SearchFill: '검색',
+  CheckFill: '체크',
+  AlphabetFill: '알파벳',
+  TimeFill: '시간',
+  ArchiveLine: '상자',
+  MoneyLine: '가격'
+});
+
+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 };
+}