chore: lint related changes and packaging fixes (#6163)

* fix: lint related changes and packaging fixes

* adding color validations

packages/utils/.eslintignore

@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*

packages/utils/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

packages/utils/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

packages/utils/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@plane/utils",
+  "version": "0.24.0",
+  "description": "Helper functions shared across multiple apps internally",
+  "private": true,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup ./src/index.ts --format esm,cjs --dts --external react --minify",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:errors": "eslint . --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "isomorphic-dompurify": "^2.16.0",
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.11",
+    "tsup": "^7.2.0",
+    "typescript": "^5.3.3"
+  }
+}

packages/utils/src/color.ts

@@ -0,0 +1,60 @@
+/**
+ * Represents an RGB color with numeric values for red, green, and blue components
+ * @typedef {Object} RGB
+ * @property {number} r - Red component (0-255)
+ * @property {number} g - Green component (0-255)
+ * @property {number} b - Blue component (0-255)
+ */
+export type RGB = { r: number; g: number; b: number };
+
+/**
+ * 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
+ */
+export const validateColor = (value: number) => {
+  if (value < 0) return 0;
+  if (value > 255) return 255;
+  return Math.floor(value);
+};
+
+/**
+ * Converts a decimal color value to two-character hex
+ * @param {number} value - Decimal color value (0-255)
+ * @returns {string} Two-character hex value with leading zero if needed
+ */
+export const toHex = (value: number) => validateColor(value).toString(16).padStart(2, "0");
+
+/**
+ * Converts a hexadecimal color code to RGB values
+ * @param {string} hex - The hexadecimal color code (e.g., "#ff0000" for red)
+ * @returns {RGB} An object containing the RGB values
+ * @example
+ * hexToRgb("#ff0000") // returns { r: 255, g: 0, b: 0 }
+ * hexToRgb("#00ff00") // returns { r: 0, g: 255, b: 0 }
+ * hexToRgb("#0000ff") // returns { r: 0, g: 0, b: 255 }
+ */
+export const hexToRgb = (hex: string): RGB => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 0, g: 0, b: 0 };
+};
+
+/**
+ * Converts RGB values to a hexadecimal color code
+ * @param {RGB} rgb - An object containing RGB values
+ * @param {number} rgb.r - Red component (0-255)
+ * @param {number} rgb.g - Green component (0-255)
+ * @param {number} rgb.b - Blue component (0-255)
+ * @returns {string} The hexadecimal color code (e.g., "#ff0000" for red)
+ * @example
+ * rgbToHex({ r: 255, g: 0, b: 0 }) // returns "#ff0000"
+ * rgbToHex({ r: 0, g: 255, b: 0 }) // returns "#00ff00"
+ * rgbToHex({ r: 0, g: 0, b: 255 }) // returns "#0000ff"
+ */
+export const rgbToHex = ({ r, g, b }: RGB): string => `#${toHex(r)}${toHex(g)}${toHex(b)}`;

packages/utils/src/emoji.ts

@@ -0,0 +1,40 @@
+/**
+ * Converts a hyphen-separated hexadecimal emoji code to its decimal representation
+ * @param {string} emojiUnified - The unified emoji code in hexadecimal format (e.g., "1f600" or "1f1e6-1f1e8")
+ * @returns {string} The decimal representation of the emoji code (e.g., "128512" or "127462-127464")
+ * @example
+ * convertHexEmojiToDecimal("1f600") // returns "128512"
+ * convertHexEmojiToDecimal("1f1e6-1f1e8") // returns "127462-127464"
+ * convertHexEmojiToDecimal("") // returns ""
+ */
+export const convertHexEmojiToDecimal = (emojiUnified: string): string => {
+  if (!emojiUnified) return "";
+
+  return emojiUnified
+    .toString()
+    .split("-")
+    .map((e) => parseInt(e, 16))
+    .join("-");
+};
+
+/**
+ * Converts a hyphen-separated decimal emoji code back to its hexadecimal representation
+ * @param {string} emoji - The emoji code in decimal format (e.g., "128512" or "127462-127464")
+ * @returns {string} The hexadecimal representation of the emoji code (e.g., "1f600" or "1f1e6-1f1e8")
+ * @example
+ * emojiCodeToUnicode("128512") // returns "1f600"
+ * emojiCodeToUnicode("127462-127464") // returns "1f1e6-1f1e8"
+ * emojiCodeToUnicode("") // returns ""
+ */
+export const emojiCodeToUnicode = (emoji: string): string => {
+  if (!emoji) return "";
+
+  // convert emoji code to unicode
+  const uniCodeEmoji = emoji
+    .toString()
+    .split("-")
+    .map((emoji) => parseInt(emoji, 10).toString(16))
+    .join("-");
+
+  return uniCodeEmoji;
+};

packages/utils/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./color";
+export * from "./emoji";
+export * from "./string";

packages/utils/src/string.ts

@@ -0,0 +1,15 @@
+import DOMPurify from "isomorphic-dompurify";
+
+/**
+ * @description: This function will remove all the HTML tags from the string
+ * @param {string} html
+ * @return {string}
+ * @example:
+ * const html = "<p>Some text</p>";
+ * const text = stripHTML(html);
+ * console.log(text); // Some text
+ */
+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
+};

packages/utils/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["./src"],
+  "exclude": ["dist", "build", "node_modules"]
+}