From ed64168ca7bca1975fcccb97234b738254344286 Mon Sep 17 00:00:00 2001 From: "devin-ai-integration[bot]" <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Thu, 26 Dec 2024 15:27:40 +0530 Subject: [PATCH] chore(utils): copy helper functions from web/helpers (#6264) * chore(utils): copy helper functions from web/helpers Co-Authored-By: sriram@plane.so * chore(utils): bump version to 0.24.2 Co-Authored-By: sriram@plane.so * chore: bump root package version to 0.24.2 Co-Authored-By: sriram@plane.so * fix: remove duplicate function and simplify auth utils Co-Authored-By: sriram@plane.so * fix: improve HTML entity escaping in sanitizeHTML Co-Authored-By: sriram@plane.so * fix: version changes --------- Co-authored-by: sriram veeraghanta Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: sriram@plane.so --- packages/constants/src/auth.ts | 2 +- packages/utils/package.json | 1 + packages/utils/src/array.ts | 197 +++++++++++++++++++++ packages/utils/src/auth.ts | 75 +++++++- packages/utils/src/color.ts | 6 +- packages/utils/src/datetime.ts | 303 ++++++++++++++++++++++++++++++++- packages/utils/src/index.ts | 2 + packages/utils/src/string.ts | 264 ++++++++++++++++++++++++---- 8 files changed, 800 insertions(+), 50 deletions(-) create mode 100644 packages/utils/src/array.ts diff --git a/packages/constants/src/auth.ts b/packages/constants/src/auth.ts index 884a8dd1c..bcdda31b4 100644 --- a/packages/constants/src/auth.ts +++ b/packages/constants/src/auth.ts @@ -7,7 +7,7 @@ export enum E_PASSWORD_STRENGTH { export const PASSWORD_MIN_LENGTH = 8; -export const PASSWORD_CRITERIA = [ +export const SPACE_PASSWORD_CRITERIA = [ { key: "min_8_char", label: "Min 8 characters", diff --git a/packages/utils/package.json b/packages/utils/package.json index 6fa156f62..f1c2cdd9b 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -18,6 +18,7 @@ "clsx": "^2.1.1", "date-fns": "^4.1.0", "isomorphic-dompurify": "^2.16.0", + "lodash": "^4.17.21", "react": "^18.3.1", "tailwind-merge": "^2.5.5", "zxcvbn": "^4.4.2" diff --git a/packages/utils/src/array.ts b/packages/utils/src/array.ts new file mode 100644 index 000000000..12727d3a0 --- /dev/null +++ b/packages/utils/src/array.ts @@ -0,0 +1,197 @@ +import isEmpty from "lodash/isEmpty"; +import { IIssueLabel, IIssueLabelTree } from "@plane/types"; + +/** + * @description Groups an array of objects by a specified key + * @param {any[]} array Array to group + * @param {string} key Key to group by (supports dot notation for nested objects) + * @returns {Object} Grouped object with keys being the grouped values + * @example + * const array = [{type: 'A', value: 1}, {type: 'B', value: 2}, {type: 'A', value: 3}]; + * groupBy(array, 'type') // returns { A: [{type: 'A', value: 1}, {type: 'A', value: 3}], B: [{type: 'B', value: 2}] } + */ +export const groupBy = (array: any[], key: string) => { + const innerKey = key.split("."); // split the key by dot + return array.reduce((result, currentValue) => { + const key = innerKey.reduce((obj, i) => obj?.[i], currentValue) ?? "None"; // get the value of the inner key + (result[key] = result[key] || []).push(currentValue); + return result; + }, {}); +}; + +/** + * @description Orders an array by a specified key in ascending or descending order + * @param {any[]} orgArray Original array to order + * @param {string} key Key to order by (supports dot notation for nested objects) + * @param {"ascending" | "descending"} ordering Sort order + * @returns {any[]} Ordered array + * @example + * const array = [{value: 2}, {value: 1}, {value: 3}]; + * orderArrayBy(array, 'value', 'ascending') // returns [{value: 1}, {value: 2}, {value: 3}] + */ +export const orderArrayBy = (orgArray: any[], key: string, ordering: "ascending" | "descending" = "ascending") => { + if (!orgArray || !Array.isArray(orgArray) || orgArray.length === 0) return []; + + const array = [...orgArray]; + + if (key[0] === "-") { + ordering = "descending"; + key = key.slice(1); + } + + const innerKey = key.split("."); // split the key by dot + + return array.sort((a, b) => { + const keyA = innerKey.reduce((obj, i) => obj[i], a); // get the value of the inner key + const keyB = innerKey.reduce((obj, i) => obj[i], b); // get the value of the inner key + if (keyA < keyB) { + return ordering === "ascending" ? -1 : 1; + } + if (keyA > keyB) { + return ordering === "ascending" ? 1 : -1; + } + return 0; + }); +}; + +/** + * @description Checks if an array contains duplicate values + * @param {any[]} array Array to check for duplicates + * @returns {boolean} True if duplicates exist, false otherwise + * @example + * checkDuplicates([1, 2, 2, 3]) // returns true + * checkDuplicates([1, 2, 3]) // returns false + */ +export const checkDuplicates = (array: any[]) => new Set(array).size !== array.length; + +/** + * @description Finds the string with the most characters in an array of strings + * @param {string[]} strings Array of strings to check + * @returns {string} String with the most characters + * @example + * findStringWithMostCharacters(['a', 'bb', 'ccc']) // returns 'ccc' + */ +export const findStringWithMostCharacters = (strings: string[]): string => { + if (!strings || strings.length === 0) return ""; + + return strings.reduce((longestString, currentString) => + currentString.length > longestString.length ? currentString : longestString + ); +}; + +/** + * @description Checks if two arrays have the same elements regardless of order + * @param {any[] | null} arr1 First array + * @param {any[] | null} arr2 Second array + * @returns {boolean} True if arrays have same elements, false otherwise + * @example + * checkIfArraysHaveSameElements([1, 2], [2, 1]) // returns true + * checkIfArraysHaveSameElements([1, 2], [1, 3]) // returns false + */ +export const checkIfArraysHaveSameElements = (arr1: any[] | null, arr2: any[] | null): boolean => { + if (!arr1 || !arr2) return false; + if (!Array.isArray(arr1) || !Array.isArray(arr2)) return false; + if (arr1.length === 0 && arr2.length === 0) return true; + + return arr1.length === arr2.length && arr1.every((e) => arr2.includes(e)); +}; + + +type GroupedItems = { [key: string]: T[] }; + +/** + * @description Groups an array of objects by a specified field + * @param {T[]} array Array to group + * @param {keyof T} field Field to group by + * @returns {GroupedItems} Grouped object + * @example + * const array = [{type: 'A', value: 1}, {type: 'B', value: 2}]; + * groupByField(array, 'type') // returns { A: [{type: 'A', value: 1}], B: [{type: 'B', value: 2}] } + */ +export const groupByField = (array: T[], field: keyof T): GroupedItems => + array.reduce((grouped: GroupedItems, item: T) => { + const key = String(item[field]); + grouped[key] = (grouped[key] || []).concat(item); + return grouped; + }, {}); + +/** + * @description Sorts an array of objects by a specified field + * @param {any[]} array Array to sort + * @param {string} field Field to sort by + * @returns {any[]} Sorted array + * @example + * const array = [{value: 2}, {value: 1}]; + * sortByField(array, 'value') // returns [{value: 1}, {value: 2}] + */ +export const sortByField = (array: any[], field: string): any[] => + array.sort((a, b) => (a[field] < b[field] ? -1 : a[field] > b[field] ? 1 : 0)); + +/** + * @description Orders grouped data by a specified field + * @param {GroupedItems} groupedData Grouped data object + * @param {keyof T} orderBy Field to order by + * @returns {GroupedItems} Ordered grouped data + */ +export const orderGroupedDataByField = (groupedData: GroupedItems, orderBy: keyof T): GroupedItems => { + for (const key in groupedData) { + if (groupedData.hasOwnProperty(key)) { + groupedData[key] = groupedData[key].sort((a, b) => { + if (a[orderBy] < b[orderBy]) return -1; + if (a[orderBy] > b[orderBy]) return 1; + return 0; + }); + } + } + return groupedData; +}; + +/** + * @description Builds a tree structure from an array of labels + * @param {IIssueLabel[]} array Array of labels + * @param {any} parent Parent ID + * @returns {IIssueLabelTree[]} Tree structure + */ +export const buildTree = (array: IIssueLabel[], parent = null) => { + const tree: IIssueLabelTree[] = []; + + array.forEach((item: any) => { + if (item.parent === parent) { + const children = buildTree(array, item.id); + item.children = children; + tree.push(item); + } + }); + + return tree; +}; + +/** + * @description Returns valid keys from object whose value is not falsy + * @param {any} obj Object to check + * @returns {string[]} Array of valid keys + * @example + * getValidKeysFromObject({a: 1, b: 0, c: null}) // returns ['a'] + */ +export const getValidKeysFromObject = (obj: any) => { + if (!obj || isEmpty(obj) || typeof obj !== "object" || Array.isArray(obj)) return []; + + return Object.keys(obj).filter((key) => !!obj[key]); +}; + +/** + * @description Converts an array of strings into an object with boolean true values + * @param {string[]} arrayStrings Array of strings + * @returns {Object} Object with string keys and boolean values + * @example + * convertStringArrayToBooleanObject(['a', 'b']) // returns {a: true, b: true} + */ +export const convertStringArrayToBooleanObject = (arrayStrings: string[]) => { + const obj: { [key: string]: boolean } = {}; + + for (const arrayString of arrayStrings) { + obj[arrayString] = true; + } + + return obj; +}; diff --git a/packages/utils/src/auth.ts b/packages/utils/src/auth.ts index bea3eb275..297b4c9ed 100644 --- a/packages/utils/src/auth.ts +++ b/packages/utils/src/auth.ts @@ -1,8 +1,71 @@ import { ReactNode } from "react"; import zxcvbn from "zxcvbn"; -import { E_PASSWORD_STRENGTH, PASSWORD_CRITERIA, PASSWORD_MIN_LENGTH } from "@plane/constants"; +import { + E_PASSWORD_STRENGTH, + SPACE_PASSWORD_CRITERIA, + PASSWORD_MIN_LENGTH, + EErrorAlertType, + EAuthErrorCodes, +} from "@plane/constants"; -import { EPageTypes, EErrorAlertType, EAuthErrorCodes } from "@plane/constants"; +/** + * @description Password strength levels + */ +export enum PasswordStrength { + EMPTY = "empty", + WEAK = "weak", + FAIR = "fair", + GOOD = "good", + STRONG = "strong", +} + +/** + * @description Password strength criteria type + */ +export type PasswordCriterion = { + regex: RegExp; + description: string; +}; + +/** + * @description Password strength criteria + */ +export const PASSWORD_CRITERIA: PasswordCriterion[] = [ + { regex: /[a-z]/, description: "lowercase" }, + { regex: /[A-Z]/, description: "uppercase" }, + { regex: /[0-9]/, description: "number" }, + { regex: /[^a-zA-Z0-9]/, description: "special character" }, +]; + +/** + * @description Checks if password meets all criteria + * @param {string} password - Password to check + * @returns {boolean} Whether password meets all criteria + */ +export const checkPasswordCriteria = (password: string): boolean => + PASSWORD_CRITERIA.every((criterion) => criterion.regex.test(password)); + +/** + * @description Checks password strength against criteria + * @param {string} password - Password to check + * @returns {PasswordStrength} Password strength level + * @example + * checkPasswordStrength("abc") // returns PasswordStrength.WEAK + * checkPasswordStrength("Abc123!@#") // returns PasswordStrength.STRONG + */ +export const checkPasswordStrength = (password: string): PasswordStrength => { + if (!password || password.length === 0) return PasswordStrength.EMPTY; + if (password.length < PASSWORD_MIN_LENGTH) return PasswordStrength.WEAK; + + const criteriaCount = PASSWORD_CRITERIA.filter((criterion) => criterion.regex.test(password)).length; + + const zxcvbnScore = zxcvbn(password).score; + + if (criteriaCount <= 1 || zxcvbnScore <= 1) return PasswordStrength.WEAK; + if (criteriaCount === 2 || zxcvbnScore === 2) return PasswordStrength.FAIR; + if (criteriaCount === 3 || zxcvbnScore === 3) return PasswordStrength.GOOD; + return PasswordStrength.STRONG; +}; export type TAuthErrorInfo = { type: EErrorAlertType; @@ -26,9 +89,9 @@ export const getPasswordStrength = (password: string): E_PASSWORD_STRENGTH => { return passwordStrength; } - const passwordCriteriaValidation = PASSWORD_CRITERIA.map((criteria) => criteria.isCriteriaValid(password)).every( - (criterion) => criterion - ); + const passwordCriteriaValidation = SPACE_PASSWORD_CRITERIA.map((criteria) => + criteria.isCriteriaValid(password) + ).every((criterion) => criterion); const passwordStrengthScore = zxcvbn(password).score; if (passwordCriteriaValidation === false || passwordStrengthScore <= 2) { @@ -76,7 +139,7 @@ const errorCodeMessages: { // sign up [EAuthErrorCodes.USER_ALREADY_EXIST]: { title: `User already exists`, - message: (email = undefined) => `Your account is already registered. Sign in now.`, + message: () => `Your account is already registered. Sign in now.`, }, [EAuthErrorCodes.REQUIRED_EMAIL_PASSWORD_SIGN_UP]: { title: `Email and password required`, diff --git a/packages/utils/src/color.ts b/packages/utils/src/color.ts index 702719c79..77a5c15c5 100644 --- a/packages/utils/src/color.ts +++ b/packages/utils/src/color.ts @@ -8,9 +8,13 @@ export type RGB = { r: number; g: number; b: number }; /** - * Validates and clamps color values to RGB range (0-255) + * @description Validates and clamps color values to RGB range (0-255) * @param {number} value - The color value to validate * @returns {number} Clamped and floored value between 0-255 + * @example + * validateColor(-10) // returns 0 + * validateColor(300) // returns 255 + * validateColor(128) // returns 128 */ export const validateColor = (value: number) => { if (value < 0) return 0; diff --git a/packages/utils/src/datetime.ts b/packages/utils/src/datetime.ts index d558d1661..0a12a2270 100644 --- a/packages/utils/src/datetime.ts +++ b/packages/utils/src/datetime.ts @@ -1,4 +1,4 @@ -import { format, isValid } from "date-fns"; +import { differenceInDays, format, formatDistanceToNow, isAfter, isEqual, isValid, parseISO } from "date-fns"; /** * This method returns a date from string of type yyyy-mm-dd @@ -31,16 +31,305 @@ export const getDate = (date: string | Date | undefined | null): Date | undefine * @param {Date | string} date * @example renderFormattedDate("2024-01-01") // Jan 01, 2024 */ -export const renderFormattedDate = (date: string | Date | undefined | null): string | null => { +/** + * @description Returns date in the formatted format + * @param {Date | string} date Date to format + * @param {string} formatToken Format token (optional, default: MMM dd, yyyy) + * @returns {string | undefined} Formatted date in the desired format + * @example + * renderFormattedDate("2024-01-01") // returns "Jan 01, 2024" + * renderFormattedDate("2024-01-01", "MM-DD-YYYY") // returns "01-01-2024" + */ +export const renderFormattedDate = ( + date: string | Date | undefined | null, + formatToken: string = "MMM dd, yyyy" +): string | undefined => { // Parse the date to check if it is valid const parsedDate = getDate(date); // return if undefined - if (!parsedDate) return null; + if (!parsedDate) return; // Check if the parsed date is valid before formatting - if (!isValid(parsedDate)) return null; // Return null for invalid dates - // Format the date in format (MMM dd, yyyy) - const formattedDate = format(parsedDate, "MMM dd, yyyy"); + if (!isValid(parsedDate)) return; // Return undefined for invalid dates + let formattedDate; + try { + // Format the date in the format provided or default format (MMM dd, yyyy) + formattedDate = format(parsedDate, formatToken); + } catch (e) { + // Format the date in format (MMM dd, yyyy) in case of any error + formattedDate = format(parsedDate, "MMM dd, yyyy"); + } return formattedDate; }; -// Note: timeAgo function was incomplete in the original file, so it has been omitted +/** + * @description Returns total number of days in range + * @param {string | Date} startDate - Start date + * @param {string | Date} endDate - End date + * @param {boolean} inclusive - Include start and end dates (optional, default: true) + * @returns {number | undefined} Total number of days + * @example + * findTotalDaysInRange("2024-01-01", "2024-01-08") // returns 8 + */ +export const findTotalDaysInRange = ( + startDate: Date | string | undefined | null, + endDate: Date | string | undefined | null, + inclusive: boolean = true +): number | undefined => { + // Parse the dates to check if they are valid + const parsedStartDate = getDate(startDate); + const parsedEndDate = getDate(endDate); + // return if undefined + if (!parsedStartDate || !parsedEndDate) return; + // Check if the parsed dates are valid before calculating the difference + if (!isValid(parsedStartDate) || !isValid(parsedEndDate)) return 0; // Return 0 for invalid dates + // Calculate the difference in days + const diffInDays = differenceInDays(parsedEndDate, parsedStartDate); + // Return the difference in days based on inclusive flag + return inclusive ? diffInDays + 1 : diffInDays; +}; + +/** + * @description Add number of days to the provided date + * @param {string | Date} startDate - Start date + * @param {number} numberOfDays - Number of days to add + * @returns {Date | undefined} Resulting date + * @example + * addDaysToDate("2024-01-01", 7) // returns Date(2024-01-08) + */ +export const addDaysToDate = (startDate: Date | string | undefined | null, numberOfDays: number): Date | undefined => { + // Parse the dates to check if they are valid + const parsedStartDate = getDate(startDate); + // return if undefined + if (!parsedStartDate) return; + const newDate = new Date(parsedStartDate); + newDate.setDate(newDate.getDate() + numberOfDays); + return newDate; +}; + +/** + * @description Returns number of days left from today + * @param {string | Date} date - Target date + * @param {boolean} inclusive - Include today (optional, default: true) + * @returns {number | undefined} Number of days left + * @example + * findHowManyDaysLeft("2024-01-08") // returns days between today and Jan 8, 2024 + */ +export const findHowManyDaysLeft = ( + date: Date | string | undefined | null, + inclusive: boolean = true +): number | undefined => { + if (!date) return undefined; + return findTotalDaysInRange(new Date(), date, inclusive); +}; + +/** + * @description Returns time passed since the event happened + * @param {string | number | Date} time - Time to calculate from + * @returns {string} Formatted time ago string + * @example + * calculateTimeAgo("2023-01-01") // returns "1 year ago" + */ +export const calculateTimeAgo = (time: string | number | Date | null): string => { + if (!time) return ""; + const parsedTime = typeof time === "string" || typeof time === "number" ? parseISO(String(time)) : time; + if (!parsedTime) return ""; + const distance = formatDistanceToNow(parsedTime, { addSuffix: true }); + return distance; +}; + +/** + * @description Returns short form of time passed (e.g., 1y, 2mo, 3d) + * @param {string | number | Date} date - Date to calculate from + * @returns {string} Short form time ago + * @example + * calculateTimeAgoShort("2023-01-01") // returns "1y" + */ +export const calculateTimeAgoShort = (date: string | number | Date | null): string => { + if (!date) return ""; + + const parsedDate = typeof date === "string" ? parseISO(date) : new Date(date); + const now = new Date(); + const diffInSeconds = (now.getTime() - parsedDate.getTime()) / 1000; + + if (diffInSeconds < 60) return `${Math.floor(diffInSeconds)}s`; + const diffInMinutes = diffInSeconds / 60; + if (diffInMinutes < 60) return `${Math.floor(diffInMinutes)}m`; + const diffInHours = diffInMinutes / 60; + if (diffInHours < 24) return `${Math.floor(diffInHours)}h`; + const diffInDays = diffInHours / 24; + if (diffInDays < 30) return `${Math.floor(diffInDays)}d`; + const diffInMonths = diffInDays / 30; + if (diffInMonths < 12) return `${Math.floor(diffInMonths)}mo`; + const diffInYears = diffInMonths / 12; + return `${Math.floor(diffInYears)}y`; +}; + +/** + * @description Checks if a date is greater than today + * @param {string} dateStr - Date string to check + * @returns {boolean} True if date is greater than today + * @example + * isDateGreaterThanToday("2024-12-31") // returns true + */ +export const isDateGreaterThanToday = (dateStr: string): boolean => { + if (!dateStr) return false; + const date = parseISO(dateStr); + const today = new Date(); + if (!isValid(date)) return false; + return isAfter(date, today); +}; + +/** + * @description Returns week number of date + * @param {Date} date - Date to get week number from + * @returns {number} Week number (1-52) + * @example + * getWeekNumberOfDate(new Date("2023-09-01")) // returns 35 + */ +export const getWeekNumberOfDate = (date: Date): number => { + const currentDate = date; + const startDate = new Date(currentDate.getFullYear(), 0, 1); + const days = Math.floor((currentDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1000)); + const weekNumber = Math.ceil((days + 1) / 7); + return weekNumber; +}; + +/** + * @description Checks if two dates are equal + * @param {Date | string} date1 - First date + * @param {Date | string} date2 - Second date + * @returns {boolean} True if dates are equal + * @example + * checkIfDatesAreEqual("2024-01-01", "2024-01-01") // returns true + */ +export const checkIfDatesAreEqual = ( + date1: Date | string | null | undefined, + date2: Date | string | null | undefined +): boolean => { + const parsedDate1 = getDate(date1); + const parsedDate2 = getDate(date2); + if (!parsedDate1 && !parsedDate2) return true; + if (!parsedDate1 || !parsedDate2) return false; + return isEqual(parsedDate1, parsedDate2); +}; + +/** + * @description Checks if a string matches date format YYYY-MM-DD + * @param {string} date - Date string to check + * @returns {boolean} True if string matches date format + * @example + * isInDateFormat("2024-01-01") // returns true + */ +export const isInDateFormat = (date: string): boolean => { + const datePattern = /^\d{4}-\d{2}-\d{2}$/; + return datePattern.test(date); +}; + +/** + * @description Converts date string to ISO format + * @param {string} dateString - Date string to convert + * @returns {string | undefined} ISO date string + * @example + * convertToISODateString("2024-01-01") // returns "2024-01-01T00:00:00.000Z" + */ +export const convertToISODateString = (dateString: string | undefined): string | undefined => { + if (!dateString) return dateString; + const date = new Date(dateString); + return date.toISOString(); +}; + +/** + * @description Converts date string to epoch timestamp + * @param {string} dateString - Date string to convert + * @returns {number | undefined} Epoch timestamp + * @example + * convertToEpoch("2024-01-01") // returns 1704067200000 + */ +export const convertToEpoch = (dateString: string | undefined): number | undefined => { + if (!dateString) return undefined; + const date = new Date(dateString); + return date.getTime(); +}; + +/** + * @description Gets current date time in ISO format + * @returns {string} Current date time in ISO format + * @example + * getCurrentDateTimeInISO() // returns "2024-01-01T12:00:00.000Z" + */ +export const getCurrentDateTimeInISO = (): string => { + const date = new Date(); + return date.toISOString(); +}; + +/** + * @description Converts hours and minutes to total minutes + * @param {number} hours - Number of hours + * @param {number} minutes - Number of minutes + * @returns {number} Total minutes + * @example + * convertHoursMinutesToMinutes(2, 30) // returns 150 + */ +export const convertHoursMinutesToMinutes = (hours: number, minutes: number): number => hours * 60 + minutes; + +/** + * @description Converts total minutes to hours and minutes + * @param {number} mins - Total minutes + * @returns {{ hours: number; minutes: number }} Hours and minutes + * @example + * convertMinutesToHoursAndMinutes(150) // returns { hours: 2, minutes: 30 } + */ +export const convertMinutesToHoursAndMinutes = (mins: number): { hours: number; minutes: number } => { + const hours = Math.floor(mins / 60); + const minutes = Math.floor(mins % 60); + return { hours, minutes }; +}; + +/** + * @description Converts minutes to hours and minutes string + * @param {number} totalMinutes - Total minutes + * @returns {string} Formatted string (e.g., "2h 30m") + * @example + * convertMinutesToHoursMinutesString(150) // returns "2h 30m" + */ +export const convertMinutesToHoursMinutesString = (totalMinutes: number): string => { + const { hours, minutes } = convertMinutesToHoursAndMinutes(totalMinutes); + return `${hours ? `${hours}h ` : ``}${minutes ? `${minutes}m ` : ``}`; +}; + +/** + * @description Calculates read time in seconds from word count + * @param {number} wordsCount - Number of words + * @returns {number} Read time in seconds + * @example + * getReadTimeFromWordsCount(400) // returns 120 + */ +export const getReadTimeFromWordsCount = (wordsCount: number): number => { + const wordsPerMinute = 200; + const minutes = wordsCount / wordsPerMinute; + return minutes * 60; +}; + +/** + * @description Generates array of dates between start and end dates + * @param {string | Date} startDate - Start date + * @param {string | Date} endDate - End date + * @returns {Array<{ date: string }>} Array of dates + * @example + * generateDateArray("2024-01-01", "2024-01-03") + * // returns [{ date: "2024-01-02" }, { date: "2024-01-03" }] + */ +export const generateDateArray = (startDate: string | Date, endDate: string | Date): Array<{ date: string }> => { + const start = new Date(startDate); + const end = new Date(endDate); + end.setDate(end.getDate() + 1); + + const dateArray = []; + while (start <= end) { + start.setDate(start.getDate() + 1); + dateArray.push({ + date: new Date(start).toISOString().split("T")[0], + }); + } + return dateArray; +}; diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 597fb5db9..a7d6a7960 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,4 +1,6 @@ +export * from "./array"; export * from "./auth"; +export * from "./datetime"; export * from "./color"; export * from "./common"; export * from "./datetime"; diff --git a/packages/utils/src/string.ts b/packages/utils/src/string.ts index 7b2ffa858..2fc52a254 100644 --- a/packages/utils/src/string.ts +++ b/packages/utils/src/string.ts @@ -1,9 +1,182 @@ import DOMPurify from "isomorphic-dompurify"; -export const addSpaceIfCamelCase = (str: string) => str.replace(/([a-z])([A-Z])/g, "$1 $2"); +/** + * @description Adds space between camelCase words + * @param {string} str - String to add spaces to + * @returns {string} String with spaces between camelCase words + * @example + * addSpaceIfCamelCase("camelCase") // returns "camel Case" + * addSpaceIfCamelCase("thisIsATest") // returns "this Is A Test" + */ +export const addSpaceIfCamelCase = (str: string) => { + if (str === undefined || str === null) return ""; + if (typeof str !== "string") str = `${str}`; + + return str.replace(/([a-z])([A-Z])/g, "$1 $2"); +}; + +/** + * @description Replaces underscores with spaces in snake_case strings + * @param {string} str - String to replace underscores in + * @returns {string} String with underscores replaced by spaces + * @example + * replaceUnderscoreIfSnakeCase("snake_case") // returns "snake case" + */ export const replaceUnderscoreIfSnakeCase = (str: string) => str.replace(/_/g, " "); +/** + * @description Truncates text to specified length and adds ellipsis + * @param {string} str - String to truncate + * @param {number} length - Maximum length before truncation + * @returns {string} Truncated string with ellipsis if needed + * @example + * truncateText("This is a long text", 7) // returns "This is..." + */ +export const truncateText = (str: string, length: number) => { + if (!str || str === "") return ""; + + return str.length > length ? `${str.substring(0, length)}...` : str; +}; + +/** + * @description Creates a similar string by randomly shuffling characters + * @param {string} str - String to shuffle + * @returns {string} Shuffled string with same characters + * @example + * createSimilarString("hello") // might return "olleh" or "lehol" + */ +export const createSimilarString = (str: string) => { + const shuffled = str + .split("") + .sort(() => Math.random() - 0.5) + .join(""); + + return shuffled; +}; + +/** + * @description Copies full URL (origin + path) to clipboard + * @param {string} path - URL path to copy + * @returns {Promise} Promise that resolves when copying is complete + * @example + * await copyUrlToClipboard("issues/123") // copies "https://example.com/issues/123" + */ +/** + * @description Copies text to clipboard + * @param {string} text - Text to copy + * @returns {Promise} Promise that resolves when copying is complete + * @example + * await copyTextToClipboard("Hello, World!") // copies "Hello, World!" to clipboard + */ +export const copyTextToClipboard = async (text: string): Promise => { + if (typeof navigator === "undefined") return; + try { + await navigator.clipboard.writeText(text); + } catch (err) { + console.error("Failed to copy text: ", err); + } +}; + +/** + * @description Copies full URL (origin + path) to clipboard + * @param {string} path - URL path to copy + * @returns {Promise} Promise that resolves when copying is complete + * @example + * await copyUrlToClipboard("issues/123") // copies "https://example.com/issues/123" + */ +export const copyUrlToClipboard = async (path: string) => { + const originUrl = typeof window !== "undefined" && window.location.origin ? window.location.origin : ""; + await copyTextToClipboard(`${originUrl}/${path}`); +}; + +/** + * @description Generates a deterministic HSL color based on input string + * @param {string} string - Input string to generate color from + * @returns {string} HSL color string + * @example + * generateRandomColor("hello") // returns consistent HSL color for "hello" + * generateRandomColor("") // returns "rgb(var(--color-primary-100))" + */ +export const generateRandomColor = (string: string): string => { + if (!string) return "rgb(var(--color-primary-100))"; + + string = `${string}`; + + const uniqueId = string.length.toString() + string; + const combinedString = uniqueId + string; + + const hash = Array.from(combinedString).reduce((acc, char) => { + const charCode = char.charCodeAt(0); + return (acc << 5) - acc + charCode; + }, 0); + + const hue = hash % 360; + const saturation = 70; + const lightness = 60; + + const randomColor = `hsl(${hue}, ${saturation}%, ${lightness}%)`; + + return randomColor; +}; + +/** + * @description Gets first character of first word or first characters of first two words + * @param {string} str - Input string + * @returns {string} First character(s) + * @example + * getFirstCharacters("John") // returns "J" + * getFirstCharacters("John Doe") // returns "JD" + */ +export const getFirstCharacters = (str: string) => { + const words = str.trim().split(" "); + if (words.length === 1) { + return words[0].charAt(0); + } else { + return words[0].charAt(0) + words[1].charAt(0); + } +}; + +/** + * @description Formats number count, showing "99+" for numbers over 99 + * @param {number} number - Number to format + * @returns {string} Formatted number string + * @example + * getNumberCount(50) // returns "50" + * getNumberCount(100) // returns "99+" + */ +export const getNumberCount = (number: number): string => { + if (number > 99) { + return "99+"; + } + return number.toString(); +}; + +/** + * @description Converts object to URL query parameters string + * @param {Object} obj - Object to convert + * @returns {string} URL query parameters string + * @example + * objToQueryParams({ page: 1, search: "test" }) // returns "page=1&search=test" + * objToQueryParams({ a: null, b: "test" }) // returns "b=test" + */ +export const objToQueryParams = (obj: any) => { + const params = new URLSearchParams(); + + if (!obj) return params.toString(); + + for (const [key, value] of Object.entries(obj)) { + if (value !== undefined && value !== null) params.append(key, value as string); + } + + return params.toString(); +}; + +/** + * @description: This function will capitalize the first letter of a string + * @param str String + * @returns String + */ export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase() + str.slice(1); /** @@ -15,9 +188,30 @@ export const capitalizeFirstLetter = (str: string) => str.charAt(0).toUpperCase( * const text = stripHTML(html); * console.log(text); // Some text */ +/** + * @description Sanitizes HTML string by removing tags and properly escaping entities + * @param {string} htmlString - HTML string to sanitize + * @returns {string} Sanitized string with escaped HTML entities + * @example + * sanitizeHTML("

Hello & 'world'

") // returns "Hello & 'world'" + */ export const sanitizeHTML = (htmlString: string) => { - const sanitizedText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: [] }); // sanitize the string to remove all HTML tags - return sanitizedText.trim(); // trim the string to remove leading and trailing whitespaces + if (!htmlString) return ""; + + // First use DOMPurify to remove all HTML tags while preserving text content + const sanitizedText = DOMPurify.sanitize(htmlString, { + ALLOWED_TAGS: [], + ALLOWED_ATTR: [], + USE_PROFILES: { + html: false, + svg: false, + svgFilters: false, + mathMl: false, + }, + }); + + // Additional escaping for quotes and apostrophes + return sanitizedText.trim().replace(/'/g, "'").replace(/"/g, """); }; /** @@ -86,42 +280,42 @@ export const checkURLValidity = (url: string): boolean => { }; // Browser-only clipboard functions -let copyTextToClipboard: (text: string) => Promise; +// let copyTextToClipboard: (text: string) => Promise; -if (typeof window !== "undefined") { - const fallbackCopyTextToClipboard = (text: string) => { - const textArea = document.createElement("textarea"); - textArea.value = text; +// if (typeof window !== "undefined") { +// const fallbackCopyTextToClipboard = (text: string) => { +// const textArea = document.createElement("textarea"); +// textArea.value = text; - // Avoid scrolling to bottom - textArea.style.top = "0"; - textArea.style.left = "0"; - textArea.style.position = "fixed"; +// // Avoid scrolling to bottom +// textArea.style.top = "0"; +// textArea.style.left = "0"; +// textArea.style.position = "fixed"; - document.body.appendChild(textArea); - textArea.focus(); - textArea.select(); +// document.body.appendChild(textArea); +// textArea.focus(); +// textArea.select(); - try { - // FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this. - // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand - document.execCommand("copy"); - } catch (err) {} +// try { +// // FIXME: Even though we are using this as a fallback, execCommand is deprecated 👎. We should find a better way to do this. +// // https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand +// document.execCommand("copy"); +// } catch (err) {} - document.body.removeChild(textArea); - }; +// document.body.removeChild(textArea); +// }; - copyTextToClipboard = async (text: string) => { - if (!navigator.clipboard) { - fallbackCopyTextToClipboard(text); - return; - } - await navigator.clipboard.writeText(text); - }; -} else { - copyTextToClipboard = async () => { - throw new Error("copyTextToClipboard is only available in browser environments"); - }; -} +// copyTextToClipboard = async (text: string) => { +// if (!navigator.clipboard) { +// fallbackCopyTextToClipboard(text); +// return; +// } +// await navigator.clipboard.writeText(text); +// }; +// } else { +// copyTextToClipboard = async () => { +// throw new Error("copyTextToClipboard is only available in browser environments"); +// }; +// } -export { copyTextToClipboard }; +// export { copyTextToClipboard };