@uniai-fe/util-functions 0.0.1

package/src/functions/validation.ts

@@ -0,0 +1,155 @@
+/**
+ * validation; 인덱스 데이터 체크
+ * @util
+ * @validation
+ * @param {string | number} idxValue 인덱스 데이터
+ * @return {boolean}
+ */
+export const isValidIdx = (idxValue?: number | string): boolean =>
+  typeof idxValue !== "undefined" &&
+  idxValue !== "" &&
+  !isNaN(Number(idxValue)) &&
+  Number(idxValue) > 0;
+
+/**
+ * validation; 배열 데이터 체크
+ * @util
+ * @validation
+ * @param {unknown} array 배열 데이터
+ * @return {boolean}
+ */
+export const isValidArray = (array?: unknown): boolean =>
+  typeof array !== "undefined" && Array.isArray(array);
+
+/**
+ * validation; 사업자등록번호 데이터 체크
+ * @util
+ * @validation
+ * @param {unknown} businessCode 농장 사업자등록번호
+ * @return {boolean}
+ */
+export const isValidBusinessCode = (businessCode: unknown): boolean => {
+  if (!businessCode) return false;
+  if (String(businessCode).length === 10) return !isNaN(Number(businessCode));
+  return false;
+};
+
+/**
+ * validation; 날짜 변환을 허용할 유효 number 시간값 체크
+ * @util
+ * @validation
+ * @param {number} dateNumber
+ * @return {boolean}
+ */
+export const isValidDateNumber = (dateNumber: number): boolean => {
+  const DATE_MIN = 1672498800000; // 2023-01-01T00:00:00
+  const DATE_MAX = 4828172400000; // 2123-01-01T00:00:00
+  return DATE_MIN < dateNumber && dateNumber < DATE_MAX;
+};
+
+/**
+ * validation; 날짜 데이터 체크
+ * @util
+ * @validation
+ * @param {unknown} date 날짜
+ * @return {boolean}
+ */
+export const isValidDateType = (date: unknown): boolean => {
+  if (!date) return false;
+  if (
+    typeof date === "string" ||
+    (typeof date === "number" && isValidDateNumber(date)) ||
+    date instanceof Date
+  )
+    return new Date(date) instanceof Date && !isNaN(new Date(date).valueOf());
+  return false;
+};
+
+/**
+ * validation; uuidx 계군 식별코드 데이터 체크
+ * @util
+ * @validation
+ * @param {string} uuidx 계군 식별코드
+ * @return {boolean}
+ */
+export const isValidUuidx = (uuidx?: string): boolean =>
+  typeof uuidx !== "undefined" && uuidx !== "";
+
+/**
+ * validation; 사육동 번호 데이터 체크
+ * @util
+ * @validation
+ * @param {string | number} buildingNo 사육동 번호
+ * @return {boolean}
+ */
+export const isValidBuildingNo = (buildingNo?: string | number): boolean =>
+  typeof buildingNo !== "undefined" &&
+  buildingNo !== "" &&
+  !isNaN(Number(buildingNo)) &&
+  Number(buildingNo) > 0;
+
+/**
+ * validation; building_no_s 사육동 번호 복수형 데이터 체크
+ * @util
+ * @validation
+ * @param {string} buildingNoList 사육동 번호 1,2,4,...
+ * @return {boolean}
+ */
+export const isValidBuildingNoList = (buildingNoList?: string): boolean =>
+  typeof buildingNoList === "string" &&
+  buildingNoList !== "" &&
+  buildingNoList.split(",").length > 0;
+
+/**
+ * validation; 숫자 데이터 체크
+ * @util
+ * @validation
+ * @param {unknown} value 숫자 확인 데이터
+ * @return {boolean}
+ */
+export const isValidNumber = (value: unknown): boolean =>
+  typeof value !== "undefined" && !isNaN(Number(value)) && value !== "";
+
+/**
+ * validation; 카테고리 이름이 업체인지 여부
+ * @util
+ * @validation
+ * @param {string} categoryName 카테고리 이름
+ * @return {boolean}
+ */
+export const isValidFirmCategory = (categoryName?: string): boolean =>
+  typeof categoryName === "string" &&
+  /[농장|정부기관|유통사|수의사|병성기관|부화장|도계장|사료|약품|유니아이]/.test(
+    categoryName,
+  );
+
+/**
+ * validation; 카테고리 이름이 약품/사료인지 여부
+ * @util
+ * @validation
+ * @param {string} categoryName 카테고리 이름
+ * @return {boolean}
+ */
+export const isValidFeedMedicineCategory = (categoryName?: string): boolean =>
+  typeof categoryName === "string" && /[약품|사료]/.test(categoryName);
+
+/**
+ * validation; 시간 데이터 HH:MM:SS 포맷 체크
+ * @util
+ * @validation
+ * @param {string} time
+ * @return {boolean}
+ */
+export const isValidTimeStringFormat = (time: string): boolean => {
+  const hms = time.split(":");
+  if (hms.length !== 3 || hms.some(t => isNaN(Number(t)))) return false;
+
+  // hour
+  if (Number(hms[0]) < 0 || Number(hms[0]) > 24) return false;
+  // minutes
+  if (Number(hms[1]) < 0 || Number(hms[1]) > 59) return false;
+  // seconds
+  if (Number(hms[2]) < 0 || Number(hms[2]) > 59) return false;
+
+  return true;
+};

package/src/index.tsx

@@ -0,0 +1,20 @@
+export * from "./functions/reg-exp";
+export * from "./functions/convert";
+export * from "./functions/date";
+export * from "./functions/format";
+export * from "./functions/mask";
+export * from "./functions/route";
+export * from "./functions/sort";
+export * from "./functions/validation";
+export * from "./functions/api";
+export * from "./functions/api.server";
+export * from "./functions/log";
+export * from "./functions/chart";
+export * from "./functions/file";
+
+export * from "./form/checkbox";
+
+export * from "./react/convert";
+export * from "./react/match";
+
+export * from "./style/size";

package/src/react/convert.tsx

@@ -0,0 +1,129 @@
+import { Fragment } from "react";
+import parse from "html-react-parser";
+
+export const convertTextToHTML = (
+  text: string,
+  tagName: string,
+  key?: string,
+): React.ReactNode => {
+  if (!text.includes(`<${tagName}>`)) return text;
+  const HTML_KEY = key ? key : `util/convert/text-to-html/${tagName}`;
+  const parts = text.split(new RegExp(`(<${tagName}>|</${tagName}>)`, "g"));
+
+  let isTagContents = false;
+  return (
+    <>
+      {parts.map((part, index) => {
+        if (part === `<${tagName}>`) {
+          isTagContents = true;
+          return null;
+        }
+        if (part === `</${tagName}>`) {
+          isTagContents = false;
+          return null;
+        }
+
+        if (isTagContents)
+          return (
+            <span key={`${HTML_KEY}/${index}`} className={tagName}>
+              {part}
+            </span>
+          );
+        return <Fragment key={`${HTML_KEY}/${index}`}>{part}</Fragment>;
+      })}
+    </>
+  );
+};
+
+export const convertTextToLineArray = (text: string): string[] => {
+  if (text.includes("<br")) return text.split(/<br\s*\/?>|<br>/);
+  else if (text.includes("\n")) return text.split("\n");
+  return [text];
+};
+
+/**
+ * <br />이 포함된 텍스트를 jsx로 변환
+ * @util
+ * @param {object} params
+ * @param {string} params.text
+ * @param {string} [params.key] jsx 키
+ * @param {Function} [params.callback] 변환 콜백
+ * @return {string | React.ReactNode}
+ */
+export const convertTextToJsx = ({
+  text,
+  key,
+  callback,
+}: {
+  text: string;
+} & Partial<{
+  key: string;
+  callback: (text: string) => string | React.ReactNode;
+}>): string | React.ReactNode => {
+  // string 이외의 컨텐츠는 그대로 출력
+  if (typeof text !== "string") return text;
+  // console.log("[convertTextToJsx] text", { text, key, callback });
+
+  // HTML 태그(<p>, <br> 등)가 포함된 경우에는 우선적으로 HTML을 파싱하여
+  // 원래의 마크업 구조를 그대로 유지한다.
+  // html-react-parser 는 <br> 와 <br /> 모두 적절히 처리한다.
+  if (/<[a-z][\s\S]*>/i.test(text)) {
+    return <>{parse(text)}</>;
+  }
+
+  // <br> 또는 \n이 포함된 경우 기존 로직 사용
+  const lines = convertTextToLineArray(text);
+  // console.log("[convertTextToJsx] lines", lines);
+
+  if (lines.length > 1) {
+    const LINE_KEY = "util/convert/text-to-jsx";
+    return lines.map((line, index) => (
+      <Fragment key={key ? `${key}/${index}` : `${LINE_KEY}/${line}/${index}`}>
+        {index !== 0 && <br />}
+        {typeof callback === "function" ? callback(line) : line}
+      </Fragment>
+    ));
+  }
+
+  // 일반 텍스트 반환
+  return text;
+};
+
+/**
+ * 텍스트 배열을 <br />로 구분되는 jsx로 변환
+ * @util
+ * @param {React.ReactNode[]} text_array
+ * @param {object} [options]
+ * @param {string} [options.key] jsx 키
+ * @param {number} [options.phraseGap] 줄바꿈 간격
+ * @return {React.ReactNode}
+ */
+export const convertArrayToJsx = (
+  text_array: React.ReactNode[],
+  options?: Partial<{ key: string; phraseGap: number }>,
+): React.ReactNode => {
+  if (typeof text_array === "string" || !Array.isArray(text_array))
+    return convertTextToJsx(text_array);
+
+  const LINE_KEY = "util/convert/array-to-jsx";
+  const commonKey = (
+    content: React.ReactNode,
+    index: number,
+    additionalKey?: string,
+  ) =>
+    options?.key
+      ? `${options.key}${additionalKey ? `/${additionalKey}` : ""}/${index}`
+      : `${LINE_KEY}/${String(content)}${additionalKey ? `/${additionalKey}` : ""}/${index}`;
+  return text_array.map((content, index) => (
+    <Fragment key={commonKey(content, index)}>
+      {index !== 0 && (
+        <>
+          {new Array(options?.phraseGap || 1).fill({}).map((_, i) => (
+            <br key={commonKey(content, i, "br")} />
+          ))}
+        </>
+      )}
+      {content}
+    </Fragment>
+  ));
+};

package/src/react/match.tsx

@@ -0,0 +1,41 @@
+/**
+ * 일치 텍스트를 컴포넌트로 교체
+ * @util
+ * @param {string} origin
+ * @param {RegExp} exp
+ * @param {string} renderKey
+ * @return {ReactNode[] | string} 일치 키워드가 교체된 배열
+ * @see https://gist.github.com/edivados/0b24fd7e876d1940fd273361a31ffe1c
+ */
+export function matchKeyword(
+  origin: string,
+  exp: RegExp,
+  renderKey: string,
+): React.ReactNode[] | string {
+  const matches = Array.from(origin.matchAll(exp));
+  if (!matches.length) return origin;
+
+  const jsxArray: React.ReactNode[] = [];
+  for (let i = 0; i < matches.length; i++) {
+    const match = matches[i];
+    const prevMatch = i ? matches[i - 1] : undefined;
+    const offset = prevMatch ? prevMatch.index! + prevMatch[0].length : 0;
+
+    jsxArray.push(origin.slice(offset, match.index));
+    jsxArray.push(
+      <i className="matched" key={`${renderKey}/${match}/${i}`}>
+        {match[0]}
+      </i>,
+    );
+
+    const isLastMatch = i === matches.length - 1;
+    const hasTextAfterLastMatch =
+      match.index! + match[0].length < origin.length;
+
+    if (isLastMatch && hasTextAfterLastMatch) {
+      jsxArray.push(origin.slice(match.index! + match[0].length));
+    }
+  }
+
+  return jsxArray.length ? jsxArray : origin;
+}

package/src/style/size.ts

@@ -0,0 +1,128 @@
+import type { StyleSpacingArray, StyleSpacingType } from "@uniai/types";
+
+/**
+ * 스타일 변수; rem 단위
+ * @util
+ */
+export const styleRemAmount = 10;
+
+/**
+ * 스타일 함수; px 단위를 rem 단위로 변환
+ * @util
+ * @param {number} v - px
+ */
+export const styleRem = (v: number): string => `${v / styleRemAmount}rem`;
+
+/**
+ * 스타일 함수; px 또는 string을 유효한 스타일 문자열로 변환
+ * @util
+ * @param {"px" | "rem"} unit - 단위 (px 또는 rem)
+ * @param {unknown} v - px 또는 string
+ * @param {number | string} [alt] - 대체 값 (px 또는 string)
+ * @returns {string} 유효한 스타일 문자열
+ */
+export const styleBaseSize = (
+  unit: "px" | "rem",
+  v: unknown,
+  alt?: number | string,
+): string => {
+  // 유효하지 않은 값인 경우 "auto"
+  if (!["number", "string"].includes(typeof v) && typeof alt === "undefined")
+    return "auto";
+
+  if (typeof v === "number")
+    return unit === "rem" ? styleRem(v) : `${v}${unit}`;
+  // 유효한 스타일 문자인 경우
+  if (typeof v === "string" && v) return v;
+
+  // 대체 값이 있는 경우
+  if (typeof alt === "number")
+    return unit === "rem" ? styleRem(alt) : `${alt}${unit}`;
+  else if (typeof alt === "string" && alt) return alt;
+
+  return String(v);
+};
+
+/**
+ * 스타일 함수; padding, margin 배열을 스타일 문자열로 변환
+ * @util
+ * @param {"px" | "rem"} unit - 단위 (px 또는 rem)
+ * @param {FixedLengthArray<number | string, 2 | 3 | 4>} v - 스타일 배열
+ * @returns {string} 스타일 문자열
+ * @desc
+ * 파라미터 패턴
+ * - [상하좌우]: 일괄적용 처리
+ * - [상하, 좌우]: [top-bottom, left-right]
+ * - [상, 좌우, 하]: [top, left-right, bottom]
+ * - [상, 우, 하, 좌]: [top, right, bottom, left
+ */
+export const styleSpacingArray = (
+  unit: "px" | "rem",
+  v: StyleSpacingArray,
+): string => v.map(space => styleBaseSize(unit, space)).join(" ");
+
+/**
+ * 스타일 함수; padding, margin 옵션을 스타일 문자열로 변환
+ * @util
+ * @param {"px" | "rem"} unit - 단위 (px 또는 rem)
+ * @param {StyleSpacingType} spacing - 스타일 패딩 타입
+ * @param {StyleSpacingType} [alt] - 대체 값 (px 또는 string)
+ * @desc
+ * - number | string: 단일 값
+ * - [상하좌우]: 일괄적용 처리
+ * - [상하, 좌우]: [top-bottom, left-right]
+ * - [상, 좌우, 하]: [top, left-right, bottom]
+ * - [상, 우, 하, 좌]: [top, right, bottom, left
+ */
+export const styleSpacingSize = (
+  unit: "px" | "rem",
+  spacing: StyleSpacingType | undefined,
+  alt?: StyleSpacingType,
+): string => {
+  if (typeof spacing === "undefined") {
+    if (typeof alt === "undefined") return "0";
+
+    // 대체 값이 있는 경우
+    if (Array.isArray(alt)) return styleSpacingArray(unit, alt);
+    else if (["number", "string"].includes(typeof alt) && alt !== "")
+      return styleBaseSize(unit, alt as number | string);
+  }
+  // 단일 값인 경우
+  if (["number", "string"].includes(typeof spacing) && spacing !== "")
+    return styleBaseSize(unit, spacing as number | string);
+
+  // 배열 지정하는 경우
+  if (Array.isArray(spacing)) return styleSpacingArray(unit, spacing);
+
+  return String(spacing);
+};
+
+/**
+ * 스타일 함수; padding 옵션을 스타일 문자열로 변환
+ * @util
+ * @param {"px" | "rem"} unit - 단위 (px 또는 rem)
+ * @param {StyleSpacingType} padding - 스타일 패딩 타입
+ * @param {StyleSpacingType} [alt] - 대체 값 (px 또는 string)
+ * @desc
+ * - number | string: 단일 값
+ * - [상하좌우]: 일괄적용 처리
+ * - [상하, 좌우]: [top-bottom, left-right]
+ * - [상, 좌우, 하]: [top, left-right, bottom]
+ * - [상, 우, 하, 좌]: [top, right, bottom, left]
+ */
+export const stylePaddingSize = styleSpacingSize;
+
+/**
+ * 스타일 함수; margin 옵션을 스타일 문자열로 변환
+ * @util
+ * @param {"px" | "rem"} unit - 단위 (px 또는 rem)
+ * @param {StyleSpacingType} margin - 스타일 마진 타입
+ * @param {StyleSpacingType} [alt] - 대체 값 (px 또는 string)
+ * @desc
+ * - number | string: 단일 값
+ * - [상하좌우]: 일괄적용 처리
+ * - [상하, 좌우]: [top-bottom, left-right]
+ * - [상, 좌우, 하]: [top, left-right, bottom]
+ * - [상, 우, 하, 좌]: [top, right, bottom, left]
+ */
+export const styleMarginSize = styleSpacingSize;