chore(utils): copy helper functions from web/helpers (#6264)

* chore(utils): copy helper functions from web/helpers

Co-Authored-By: sriram@plane.so <sriram@plane.so>

* chore(utils): bump version to 0.24.2

Co-Authored-By: sriram@plane.so <sriram@plane.so>

* chore: bump root package version to 0.24.2

Co-Authored-By: sriram@plane.so <sriram@plane.so>

* fix: remove duplicate function and simplify auth utils

Co-Authored-By: sriram@plane.so <sriram@plane.so>

* fix: improve HTML entity escaping in sanitizeHTML

Co-Authored-By: sriram@plane.so <sriram@plane.so>

* fix: version changes

---------

Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: sriram@plane.so <sriram@plane.so>
This commit is contained in:
devin-ai-integration[bot] 2024-12-26 15:27:40 +05:30 committed by GitHub
parent f54f3a6091
commit ed64168ca7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 800 additions and 50 deletions

View file

@ -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",

View file

@ -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"

197
packages/utils/src/array.ts Normal file
View file

@ -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<T> = { [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<T>} 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 = <T>(array: T[], field: keyof T): GroupedItems<T> =>
array.reduce((grouped: GroupedItems<T>, 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<T>} groupedData Grouped data object
* @param {keyof T} orderBy Field to order by
* @returns {GroupedItems<T>} Ordered grouped data
*/
export const orderGroupedDataByField = <T>(groupedData: GroupedItems<T>, orderBy: keyof T): GroupedItems<T> => {
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;
};

View file

@ -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`,

View file

@ -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;

View file

@ -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;
};

View file

@ -1,4 +1,6 @@
export * from "./array";
export * from "./auth";
export * from "./datetime";
export * from "./color";
export * from "./common";
export * from "./datetime";

View file

@ -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<void>} 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<void>} Promise that resolves when copying is complete
* @example
* await copyTextToClipboard("Hello, World!") // copies "Hello, World!" to clipboard
*/
export const copyTextToClipboard = async (text: string): Promise<void> => {
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<void>} 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("<p>Hello & 'world'</p>") // returns "Hello &amp; &apos;world&apos;"
*/
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, "&apos;").replace(/"/g, "&quot;");
};
/**
@ -86,42 +280,42 @@ export const checkURLValidity = (url: string): boolean => {
};
// Browser-only clipboard functions
let copyTextToClipboard: (text: string) => Promise<void>;
// let copyTextToClipboard: (text: string) => Promise<void>;
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 };