@basiln/utils 0.1.0 → 0.1.2

package/src/composeEventHandlers.ts

@@ -3,7 +3,7 @@
 export function composeEventHandlers<E>(
   originalEventHandler?: (event: E) => void,
   ourEventHandler?: (event: E) => void,
-  { checkForDefaultPrevented = true } = {},
+  { checkForDefaultPrevented = true } = {}
 ) {
   return function handleEvent(event: E) {
     originalEventHandler?.(event);

package/src/constants/josa.ts

@@ -0,0 +1,72 @@
+export const COMPLETE_HANGUL_START_CHARCODE = '가'.charCodeAt(0);
+export const COMPLETE_HANGUL_END_CHARCODE = '힣'.charCodeAt(0);
+
+export const NUMBER_OF_JONGSEONG = 28;
+export const NUMBER_OF_JUNGSEONG = 21;
+
+const DISASSEMBLED_CONSONANTS_BY_CONSONANT = {
+  '': '',
+  ㄱ: 'ㄱ',
+  ㄲ: 'ㄲ',
+  ㄳ: 'ㄱㅅ',
+  ㄴ: 'ㄴ',
+  ㄵ: 'ㄴㅈ',
+  ㄶ: 'ㄴㅎ',
+  ㄷ: 'ㄷ',
+  ㄸ: 'ㄸ',
+  ㄹ: 'ㄹ',
+  ㄺ: 'ㄹㄱ',
+  ㄻ: 'ㄹㅁ',
+  ㄼ: 'ㄹㅂ',
+  ㄽ: 'ㄹㅅ',
+  ㄾ: 'ㄹㅌ',
+  ㄿ: 'ㄹㅍ',
+  ㅀ: 'ㄹㅎ',
+  ㅁ: 'ㅁ',
+  ㅂ: 'ㅂ',
+  ㅃ: 'ㅃ',
+  ㅄ: 'ㅂㅅ',
+  ㅅ: 'ㅅ',
+  ㅆ: 'ㅆ',
+  ㅇ: 'ㅇ',
+  ㅈ: 'ㅈ',
+  ㅉ: 'ㅉ',
+  ㅊ: 'ㅊ',
+  ㅋ: 'ㅋ',
+  ㅌ: 'ㅌ',
+  ㅍ: 'ㅍ',
+  ㅎ: 'ㅎ',
+} as const;
+
+export const JONGSEONGS = (
+  [
+    '',
+    'ㄱ',
+    'ㄲ',
+    'ㄳ',
+    'ㄴ',
+    'ㄵ',
+    'ㄶ',
+    'ㄷ',
+    'ㄹ',
+    'ㄺ',
+    'ㄻ',
+    'ㄼ',
+    'ㄽ',
+    'ㄾ',
+    'ㄿ',
+    'ㅀ',
+    'ㅁ',
+    'ㅂ',
+    'ㅄ',
+    'ㅅ',
+    'ㅆ',
+    'ㅇ',
+    'ㅈ',
+    'ㅊ',
+    'ㅋ',
+    'ㅌ',
+    'ㅍ',
+    'ㅎ',
+  ] as const
+).map((consonant) => DISASSEMBLED_CONSONANTS_BY_CONSONANT[consonant]);

package/src/createContext.tsx

@@ -1,4 +1,4 @@
-import React, {
+import {
   useMemo,
   createContext as createContextRaw,
   useContext as useContextRaw,
@@ -7,10 +7,10 @@ import React, {
 
 export function createContext<ContextValueType extends object | null>(
   rootComponentName: string,
-  defaultContext?: ContextValueType,
+  defaultContext?: ContextValueType
 ) {
   const Context = createContextRaw<ContextValueType | undefined>(
-    defaultContext,
+    defaultContext
   );
 
   function Provider(props: PropsWithChildren<ContextValueType>) {
@@ -18,7 +18,7 @@ export function createContext<ContextValueType extends object | null>(
 
     const value = useMemo(
       () => contextValues,
-      [contextValues],
+      [contextValues]
     ) as ContextValueType;
 
     return <Context.Provider value={value}>{children}</Context.Provider>;
@@ -28,7 +28,7 @@ export function createContext<ContextValueType extends object | null>(
     const context = useContextRaw(Context);
     if (context == null) {
       throw new Error(
-        `${consumerName}은 ${rootComponentName}하위에서 사용해야 합니다.`,
+        `${consumerName}은 ${rootComponentName}하위에서 사용해야 합니다.`
       );
     }
 

package/src/ellipsis.ts

@@ -0,0 +1,19 @@
+import { css } from 'styled-components';
+
+export type MultiLineEllipsisProps = {
+  line: number;
+};
+
+export const ellipsis = css`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+export const multiLineEllipsis = ({ line }: MultiLineEllipsisProps) => css`
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: ${line};
+  -webkit-box-orient: vertical;
+`;

package/src/getVar.ts

@@ -1,4 +1,4 @@
-import { VariableType } from './types';
+export type VariableType = `--${string}`;
 
 export function getVar(variable: VariableType, defaultValue?: string) {
   if (defaultValue) {

package/src/hasBatchim.ts

@@ -0,0 +1,31 @@
+import {
+  COMPLETE_HANGUL_END_CHARCODE,
+  COMPLETE_HANGUL_START_CHARCODE,
+  NUMBER_OF_JONGSEONG,
+} from './constants/josa';
+
+/**
+ * 한글 음절의 받침 유무를 확인합니다.
+ * @param str - 검사할 문자열
+ * @returns 받침이 있으면 true, 없으면 false
+ */
+export function hasBatchim(str: string): boolean {
+  const lastChar = str[str.length - 1];
+  if (!lastChar) return false;
+
+  const charCode = lastChar.charCodeAt(0);
+
+  // 한글 완성형 문자인지 확인
+  if (
+    charCode < COMPLETE_HANGUL_START_CHARCODE ||
+    charCode > COMPLETE_HANGUL_END_CHARCODE
+  ) {
+    return false;
+  }
+
+  // 받침 코드 계산
+  const batchimCode =
+    (charCode - COMPLETE_HANGUL_START_CHARCODE) % NUMBER_OF_JONGSEONG;
+
+  return batchimCode > 0; // 받침이 있으면 true
+}

package/src/hexToRgba.ts

@@ -0,0 +1,45 @@
+export type HexToRgbaProps = { hex: string; alpha?: number };
+
+function parseHexToDecimal(hex: string): number {
+  return parseInt(hex, 16);
+}
+
+function validateHex(hex: string): string {
+  const match = /^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.exec(hex);
+  if (!match) {
+    throw new Error(
+      `Invalid hex value: "${hex}". Expected formats: "#RGB", "RGB", "#RRGGBB", or "RRGGBB".`
+    );
+  }
+  return match[1];
+}
+
+function expandHex(hex: string): string {
+  return hex.length === 3
+    ? hex
+        .split('')
+        .map((char) => char + char)
+        .join('')
+    : hex;
+}
+
+function isValidAlpha(alpha: number): boolean {
+  return alpha >= 0 && alpha <= 1;
+}
+
+export function hexToRgba({ hex, alpha = 1 }: HexToRgbaProps): string {
+  if (!isValidAlpha(alpha)) {
+    throw new Error(
+      `Invalid alpha value. Must be between 0 and 1, received: ${alpha}`
+    );
+  }
+
+  const validatedHex = validateHex(hex);
+  const expandedHex = expandHex(validatedHex);
+
+  const r = parseHexToDecimal(expandedHex.slice(0, 2));
+  const g = parseHexToDecimal(expandedHex.slice(2, 4));
+  const b = parseHexToDecimal(expandedHex.slice(4, 6));
+
+  return `rgba(${r},${g},${b},${alpha})`;
+}

package/src/index.ts

@@ -1,5 +1,36 @@
-export { Choose } from './Choose';
+export {
+  Choose,
+  type ChooseWhenProps,
+  type ChooseProps,
+  type ChooseOtherwiseProps,
+} from './Choose';
+
 export { composeEventHandlers } from './composeEventHandlers';
+
 export { createContext } from './createContext';
-export { getVar } from './getVar';
-export { If } from './If';
+
+export { getVar, type VariableType } from './getVar';
+
+export { If, type IfProps } from './If';
+
+export { Flex, type FlexProps } from './Flex';
+
+export {
+  ellipsis,
+  multiLineEllipsis,
+  type MultiLineEllipsisProps,
+} from './ellipsis';
+
+export { hexToRgba, type HexToRgbaProps } from './hexToRgba';
+
+export { josa, type JosaProps } from './josa';
+
+export { Validate } from './Validate';
+
+export { Spacing, type SpacingProps } from './Spacing';
+
+export { useSafeArea, type SafeAreaCssValueProps } from './useSafeArea';
+
+export { SafeArea, type SafeAreaProps } from './SafeArea';
+
+export { queryString } from './queryString';

package/src/josa.ts

@@ -0,0 +1,50 @@
+import { hasBatchim } from './hasBatchim';
+
+type JosaOption = '이/가' | '을/를' | '은/는';
+
+type ExtractJosaOption<T> = T extends `${infer A}/${infer B}` ? A | B : never;
+
+export type JosaProps<U extends JosaOption> = {
+  word: string;
+  josa: U;
+};
+
+/**
+ * 주어진 단어와 조사 옵션을 기반으로 올바른 조사를 반환합니다.
+ * @returns 단어와 올바른 조사가 결합된 문자열
+ */
+export function josa<U extends JosaOption>(
+  props: JosaProps<U>
+): `${JosaProps<U>['word']}${ExtractJosaOption<U>}` {
+  const { word, josa } = props;
+
+  if (!word) {
+    return word as `${JosaProps<U>['word']}${ExtractJosaOption<U>}`;
+  }
+
+  return `${word}${josaPicker({
+    word,
+    josa,
+  })}` as `${JosaProps<U>['word']}${ExtractJosaOption<U>}`;
+}
+
+/**
+ * 주어진 단어와 조사 옵션을 기반으로 올바른 조사를 선택합니다.
+ * @returns 올바른 조사
+ */
+function josaPicker<U extends JosaOption>(
+  props: JosaProps<U>
+): ExtractJosaOption<U> {
+  const { word, josa } = props;
+
+  if (!word) {
+    return josa.split('/')[0] as ExtractJosaOption<U>;
+  }
+
+  const has받침 = hasBatchim(word);
+  const index = has받침 ? 0 : 1;
+
+  return josa.split('/')[index] as ExtractJosaOption<U>;
+}
+
+josa.pick = josaPicker;

package/src/queryString.ts

@@ -0,0 +1,134 @@
+/**
+ * @description 쿼리 스트링을 생성합니다.
+ * @example createSearchParamString({ a: 1, b: 2, c: 3 }) // 'a=1&b=2&c=3'
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function createSearchParamString(params: Record<string, any>) {
+  return (
+    new URLSearchParams(
+      Object.entries(params)
+        .filter(([, value]) => value != null)
+        .map(([key, value]) => {
+          if (Array.isArray(value)) {
+            return value.map((x) => [key, x]);
+          }
+          return [[key, value]];
+        })
+        .flat()
+    )
+      .toString()
+      // Convert space characters to '%20' according to RFC3986 spec, from RFC1738.
+      .replace(/\+/g, '%20')
+  );
+}
+
+/**
+ * @description 물음표를 포함한 쿼리 스트링을 생성합니다.
+ * @example createQueryString({ a: 1, b: 2, c: 3 }) // '?a=1&b=2&c=3'
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function createQueryString(params: Record<string, any>) {
+  const queryString = createSearchParamString(params);
+
+  if (queryString === '') {
+    return '';
+  }
+
+  return `?${queryString}`;
+}
+
+/**
+ * @description 이터러블에서 키와 값을 가진 객체로 변환합니다.
+ * @example fromEntries([['a', 1], ['b', 2], ['c', 3]]) // { a: 1, b: 2, c: 3 }
+ */
+function fromEntries<T extends readonly [string | number, unknown]>(
+  iterable: Iterable<T>
+) {
+  const result: Record<string | number | symbol, T[1]> = {};
+
+  for (const [key, value] of Array.from(iterable)) {
+    if (result[key]) {
+      if (Array.isArray(result[key])) {
+        (result[key] as Array<string | number>).push(value as string | number);
+      } else {
+        result[key] = [result[key], value];
+      }
+    } else {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+/**
+ * @description 쿼리 스트링을 객체로 변환합니다.
+ * @example parseQueryString('?a=1&b=2&c=3') // { a: '1', b: '2', c: '3' }
+ */
+function parseQueryString<Result = Record<string, string>>(
+  queryString: string = typeof location !== 'undefined' ? location.search : ''
+): Result {
+  const query = queryString.trim().replace(/^[?#&]/, '');
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return fromEntries(new URLSearchParams(query)) as any;
+}
+
+/**
+ * @description 쿼리 스트링에서 특정 키의 값을 가져옵니다.
+ *
+ * @param name 가져올 쿼리 스트링의 키
+ * @param parser 가져온 값을 파싱할 함수
+ * @returns 파싱된 값
+ *
+ * @example
+ * url: 'http://example.com/?a=1'
+ * getQueryString('a') // '1'
+ * getQueryString('a', parseInt) // 1
+ * getQueryString('b') // undefined
+ * getQueryString('b', parseInt) // undefined
+ */
+function getQueryString(name: string): string | undefined;
+function getQueryString<T>(
+  name: string,
+  parser: (val: string) => T
+): T | undefined;
+function getQueryString<T = string>(name: string, parser?: (val: string) => T) {
+  const value = queryString.parse<{ [name: string]: string | undefined }>()[
+    name
+  ];
+
+  if (parser == null || value == null) {
+    return value;
+  } else {
+    return parser(value);
+  }
+}
+
+/**
+ * @description 기존 쿼리 스트링에 새로운 쿼리 스트링을 추가합니다.
+ * @example setQueryString({ qs: '?a=1', key: 'b', value: '2' }) // '?a=1&b=2'
+ */
+function setQueryString({
+  qs,
+  key,
+  value,
+}: {
+  qs: string;
+  key: string;
+  value: string;
+}) {
+  const parsed = parseQueryString(qs);
+
+  return createQueryString({
+    ...parsed,
+    [key]: value,
+  });
+}
+
+export const queryString = {
+  create: createQueryString,
+  parse: parseQueryString,
+  get: getQueryString,
+  set: setQueryString,
+};

package/src/useSafeArea.ts

@@ -0,0 +1,24 @@
+import { coerceCssPixelValue, type CSSPixelValue } from './coerceCssPixelValue';
+
+export type SafeAreaCssValueProps = {
+  top?: CSSPixelValue;
+  bottom?: CSSPixelValue;
+  left?: CSSPixelValue;
+  right?: CSSPixelValue;
+};
+
+const useSafeArea = ({
+  top: T = 0,
+  bottom: B = 0,
+  left: L = 0,
+  right: R = 0,
+}: SafeAreaCssValueProps = {}) => {
+  const top = `max(${coerceCssPixelValue(T)}, env(safe-area-inset-top))`;
+  const bottom = `max(${coerceCssPixelValue(B)}, env(safe-area-inset-bottom))`;
+  const left = `max(${coerceCssPixelValue(L)}, env(safe-area-inset-left))`;
+  const right = `max(${coerceCssPixelValue(R)}, env(safe-area-inset-right))`;
+
+  return { top, bottom, left, right };
+};
+
+export { useSafeArea };

package/tsup.config.ts

@@ -1,13 +1,13 @@
-import { defineConfig } from "tsup";
-import pkgJson from "./package.json";
+import { defineConfig } from 'tsup';
+import pkgJson from './package.json';
 
 const external = [...Object.keys((pkgJson as any).peerDependencies || {})];
 
 export default defineConfig({
-  entry: ["src/**/*.{ts,tsx}"],
-  format: ["esm", "cjs"],
+  entry: ['src/**/*.{ts,tsx}'],
+  format: ['esm', 'cjs'],
   sourcemap: true,
   clean: true,
-  dts: "src/index.ts",
+  dts: 'src/index.ts',
   external,
 });

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 SeedN
-
-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/src/types/Choose.ts

@@ -1,14 +0,0 @@
-import { ReactNode } from 'react';
-
-export type ChooseWhenProps = {
-  condition: boolean;
-  children: ReactNode;
-};
-
-export type ChooseProps = {
-  children: ReactNode;
-};
-
-export type ChooseOtherwiseProps = {
-  children: ReactNode;
-};

package/src/types/If.ts

@@ -1,6 +0,0 @@
-import { ReactNode } from 'react';
-
-export type IfProps = {
-  condition: boolean;
-  children: ReactNode;
-};

package/src/types/getVar.ts

@@ -1 +0,0 @@
-export type VariableType = `--${string}`;

package/src/types/index.ts

@@ -1,9 +0,0 @@
-export type {
-  ChooseWhenProps,
-  ChooseProps,
-  ChooseOtherwiseProps,
-} from './Choose';
-
-export type { IfProps } from './If';
-
-export type { VariableType } from './getVar';