@basiln/utils 0.1.1 → 0.1.3

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/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

@@ -6,6 +6,31 @@ export {
 } from './Choose';
 
 export { composeEventHandlers } from './composeEventHandlers';
+
 export { createContext } from './createContext';
+
 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 };