@dotss/ui 1.0.2 → 1.0.3

package/dist/resources/tictoccroc/icons/line/money-line.svg-CmMXUYQs.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (C) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...C }, /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 21.5C17.2467 21.5 21.5 17.2467 21.5 12C21.5 6.75329 17.2467 2.5 12 2.5C6.75329 2.5 2.5 6.75329 2.5 12C2.5 17.2467 6.75329 21.5 12 21.5Z", fill: "currentColor" }), /* @__PURE__ */ e.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.20225 9.48667C8.05681 9.09883 7.6245 8.90233 7.23666 9.04777C6.84882 9.19321 6.65231 9.62552 6.79775 10.0134L7.26149 11.25H6.75C6.33579 11.25 6 11.5858 6 12C6 12.4142 6.33579 12.75 6.75 12.75H7.82399L9.04775 16.0134C9.15753 16.3061 9.43737 16.5 9.75 16.5C10.0626 16.5 10.3425 16.3061 10.4522 16.0134L11.676 12.75H12.324L13.5478 16.0134C13.6575 16.3061 13.9374 16.5 14.25 16.5C14.5626 16.5 14.8425 16.3061 14.9522 16.0134L16.176 12.75H17.25C17.6642 12.75 18 12.4142 18 12C18 11.5858 17.6642 11.25 17.25 11.25H16.7385L17.2022 10.0134C17.3477 9.62552 17.1512 9.19321 16.7633 9.04777C16.3755 8.90233 15.9432 9.09883 15.7978 9.48667L15.1365 11.25H13.3635L12.7022 9.48667C12.5925 9.19394 12.3126 9.00001 12 9.00001C11.6874 9.00001 11.4075 9.19394 11.2978 9.48667L10.6365 11.25H8.86349L8.20225 9.48667ZM9.42599 12.75L9.75 13.614L10.074 12.75H9.42599ZM13.926 12.75L14.25 13.614L14.574 12.75H13.926Z", fill: "currentColor" }));
+export {
+  l as S
+};

package/dist/utils/getIconLabel/getIconLabel.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=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:"가격"});function n(e){return i[e]?i[e]:""}exports.default=n;

package/dist/utils/getIconLabel/getIconLabel.es.js

@@ -0,0 +1,125 @@
+const i = 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: "가격"
+});
+function n(e) {
+  return i[e] ? i[e] : "";
+}
+export {
+  n as default
+};

package/eslint.config.mjs

@@ -0,0 +1,10 @@
+import dotss from '@dotss/eslint-config';
+
+export default [
+  {
+    ignores: ['**/dist/**']
+  },
+  ...dotss.configs.typescript,
+  ...dotss.configs.react,
+  ...dotss.configs.storybook
+];

package/global.d.ts

@@ -0,0 +1 @@
+declare module '*.svg';

package/hooks/index.ts

@@ -0,0 +1,4 @@
+export { default as useCheckHoverPossible } from './useCheckHoverPossible/useCheckHoverPossible';
+export { default as useCheckKeyboardMode } from './useCheckKeyboardMode/useCheckKeyboardMode';
+export { default as useCheckHasFocus } from './useCheckHasFocus/useCheckHasFocus';
+export { default as useFocusBoundary } from './useFocusBoundary/useFocusBoundary';

package/hooks/useCheckHasFocus/useCheckHasFocus.ts

@@ -0,0 +1,38 @@
+import type { RefObject } from 'react';
+import { useEffect, useState } from 'react';
+
+interface UseCheckHasFocusProps {
+  ref: RefObject<HTMLElement>;
+}
+
+function useCheckHasFocus({ ref }: UseCheckHasFocusProps) {
+  const [hasFocus, setHasFocus] = useState(false);
+
+  useEffect(() => {
+    const handleFocusIn = (e: FocusEvent) => {
+      const target = e.target as HTMLElement;
+      if (ref.current?.contains(target)) {
+        setHasFocus(true);
+      }
+    };
+
+    const handleFocusOut = (e: FocusEvent) => {
+      const target = e.target as HTMLElement;
+      if (ref.current?.contains(target)) {
+        setHasFocus(false);
+      }
+    };
+
+    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('focusout', handleFocusOut);
+
+    return () => {
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('focusout', handleFocusOut);
+    };
+  }, [ref]);
+
+  return { hasFocus };
+}
+
+export default useCheckHasFocus;

package/hooks/useCheckHoverPossible/useCheckHoverPossible.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+
+function useCheckHoverPossible() {
+  const [isHoverPossible, setIsHoverPossible] = useState(true);
+
+  useEffect(() => {
+    const handleResize = () => {
+      if ('ontouchstart' in window) {
+        setIsHoverPossible(false);
+      }
+    };
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return { isHoverPossible };
+}
+
+export default useCheckHoverPossible;

package/hooks/useCheckKeyboardMode/useCheckKeyboardMode.ts

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+
+const KEYBOARD_KEYS = [
+  'Tab',
+  'ArrowUp',
+  'ArrowDown',
+  'ArrowLeft',
+  'ArrowRight',
+  'Enter',
+  ' ',
+  'Home',
+  'End',
+  'PageUp',
+  'PageDown'
+] as const;
+
+function useCheckKeyboardMode() {
+  const [isKeyboardMode, setIsKeyboardMode] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (KEYBOARD_KEYS.includes(e.key as (typeof KEYBOARD_KEYS)[number])) {
+        setIsKeyboardMode(true);
+      }
+    };
+
+    const handleMouseDown = () => {
+      setIsKeyboardMode(false);
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener('mousedown', handleMouseDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener('mousedown', handleMouseDown);
+    };
+  }, []);
+
+  return { isKeyboardMode };
+}
+
+export default useCheckKeyboardMode;

package/hooks/useFocusBoundary/useFocusBoundary.ts

@@ -0,0 +1,126 @@
+import type { RefObject } from 'react';
+import { useEffect, useRef } from 'react';
+
+interface UseFocusBoundaryProps {
+  ref: RefObject<HTMLElement>;
+  active?: boolean;
+  disabled?: boolean;
+  returnFocus?: boolean;
+  initialFocusId?: string;
+  delay?: number;
+}
+
+function useFocusBoundary({
+  ref,
+  active,
+  disabled = false,
+  returnFocus = true,
+  initialFocusId,
+  delay = 0
+}: UseFocusBoundaryProps) {
+  const previouslyFocusedElementRef = useRef<HTMLElement | null>(null);
+  const focusableElements = useRef<(HTMLElement | null)[]>([]);
+  const currentFocusIndex = useRef<number>(-1);
+  const setupTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const getFocusableElements = () => {
+    if (ref.current) {
+      focusableElements.current = Array.from(
+        ref.current.querySelectorAll<HTMLElement>(
+          'a[href]:not([tabindex="-1"]), area[href]:not([tabindex="-1"]), input:not([disabled]):not([tabindex="-1"]), select:not([disabled]):not([tabindex="-1"]), textarea:not([disabled]):not([tabindex="-1"]), button:not([disabled]):not([tabindex="-1"]), iframe:not([tabindex="-1"]), object:not([tabindex="-1"]), embed:not([tabindex="-1"]), *[tabindex]:not([tabindex="-1"]), *[contenteditable]:not([tabindex="-1"])'
+        )
+      );
+    }
+    return focusableElements.current;
+  };
+
+  const focusFirstElement = (firstFocusId?: string) => {
+    if (firstFocusId) {
+      const element = document.getElementById(firstFocusId);
+      if (element) {
+        element.focus();
+      }
+      return;
+    }
+
+    if (focusableElements.current) {
+      for (let i = 0; i < focusableElements.current.length; i++) {
+        const element = focusableElements.current[i];
+        if (!element?.getAttribute('class')?.includes('closeButton')) {
+          element?.focus();
+          currentFocusIndex.current = i;
+          break;
+        }
+      }
+    }
+  };
+
+  const focusNextElement = () => {
+    const nextElement = focusableElements.current[currentFocusIndex.current + 1];
+    if (!nextElement) {
+      focusableElements.current[0]?.focus();
+      currentFocusIndex.current = 0;
+      return;
+    }
+    nextElement.focus();
+    currentFocusIndex.current += 1;
+  };
+
+  const focusPrevElement = () => {
+    const prevElement = focusableElements.current[currentFocusIndex.current - 1];
+    if (!prevElement) {
+      focusableElements.current[focusableElements.current.length - 1]?.focus();
+      currentFocusIndex.current = focusableElements.current.length - 1;
+      return;
+    }
+    prevElement.focus();
+    currentFocusIndex.current -= 1;
+  };
+
+  useEffect(() => {
+    if (!active && previouslyFocusedElementRef.current && returnFocus) {
+      previouslyFocusedElementRef.current.focus();
+    }
+  }, [active, returnFocus]);
+
+  useEffect(() => {
+    if (disabled || !ref.current) return;
+
+    if (setupTimerRef.current) {
+      clearTimeout(setupTimerRef.current);
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Tab') {
+        e.preventDefault();
+        if (e.shiftKey) {
+          focusPrevElement();
+        } else {
+          focusNextElement();
+        }
+      }
+    };
+    const setupFocus = () => {
+      previouslyFocusedElementRef.current = document.activeElement as HTMLElement;
+      getFocusableElements();
+      focusFirstElement(initialFocusId);
+    };
+
+    if (delay > 0) {
+      setupTimerRef.current = setTimeout(setupFocus, delay);
+    } else {
+      setupFocus();
+    }
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+      if (setupTimerRef.current) {
+        clearTimeout(setupTimerRef.current);
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialFocusId, ref.current, disabled, delay]);
+}
+
+export default useFocusBoundary;

package/index.ts

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

package/node_modules/@chromatic-com/storybook/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Storybook contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/node_modules/@chromatic-com/storybook/README.md

@@ -0,0 +1,61 @@
+# Visual Tests Addon for Storybook
+
+Run visual tests on your stories and compare changes with the latest baselines to catch UI regressions early in development. Supports multiple viewports, themes, and browsers.
+
+## Prerequisites
+
+- Chromatic [account configured](https://www.chromatic.com/docs/setup#sign-up) with access to a project
+- Storybook 7.6 or later
+
+## Getting Started
+
+Run the following command to install the addon and automatically configure it for your project via Storybook's CLI:
+
+```shell
+npx storybook add @chromatic-com/storybook
+```
+
+Start Storybook and navigate to the Visual Tests panel to run your first visual test with Chromatic!
+
+## Configuration
+
+By default, the addon offers zero-config support to run visual tests with Storybook and Chromatic. However, if you need, you can customize it by providing a few options. See the [Chromatic documentation](https://www.chromatic.com/docs/visual-tests-addon/) for more information on configuring and using it with your Storybook.
+
+## Getting Help
+
+If you have any questions or need help with the addon, please get in touch with the Chromatic team. [Sign in](https://www.chromatic.com/start) to your Chromatic account and click the chat icon in the bottom right corner of the screen to start a conversation with us.
+
+## Contributing
+
+We welcome contributions! If you're a maintainer, refer to the following [instructions](./Development.md) to set up your development environment with Chromatic.
+
+### Updating the GraphQL schema
+
+The addon uses the Chromatic public GraphQL API. We rely on its schema to generate type definitions. The schema needs to be manually updated whenever it changes.
+To update, take https://github.com/chromaui/chromatic/blob/main/lib/schema/public-schema.graphql and save it under `src/gql/public-schema.graphql`.
+
+## Troubleshooting
+
+### Running Storybook with the addon enabled throws an error
+
+When installed, running Storybook may lead to the following error:
+
+```shell
+const stringWidth = require('string-width');
+
+Error [ERR_REQUIRE_ESM]: require() of ES Module /my-project/node_modules/string-width/index.js is not supported.
+```
+
+This is a [known issue](https://github.com/storybookjs/storybook/issues/22431#issuecomment-1630086092) when using an older version of the Yarn package manager (e.g., version 1.x). To solve this issue, you can [upgrade](https://yarnpkg.com/migration/guide) to the latest stable version. However, if you cannot upgrade, adjust your `package.json` file and provide a resolution field to enable the Yarn package manager to install the correct dependencies. In doing so, you may be required to delete your `node_modules` directory and `yarn.lock` file before installing the dependencies again.
+
+```json
+ "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+```
+
+Alternatively, you could use a different package manager ([npm](https://www.npmjs.com/), [pnpm](https://pnpm.io/installation)).
+
+### License
+
+[MIT](https://github.com/storybookjs/addon-coverage/blob/main/LICENSE)

package/node_modules/@chromatic-com/storybook/dist/index.js

@@ -0,0 +1,5 @@
+'use strict';
+
+var e={};
+
+module.exports = e;

package/node_modules/@chromatic-com/storybook/dist/index.mjs

@@ -0,0 +1,3 @@
+var e={};
+
+export { e as default };