chore: lint related changes and packaging fixes (#6163)
* fix: lint related changes and packaging fixes * adding color validations
This commit is contained in:
parent
b1c340b199
commit
4b5a2bc4e5
71 changed files with 1025 additions and 896 deletions
|
|
@ -27,6 +27,7 @@
|
|||
"dev": "tsup --watch",
|
||||
"check-types": "tsc --noEmit",
|
||||
"lint": "eslint src --ext .ts,.tsx",
|
||||
"lint:errors": "eslint src --ext .ts,.tsx --quiet",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\""
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
@ -36,8 +37,8 @@
|
|||
"dependencies": {
|
||||
"@floating-ui/react": "^0.26.4",
|
||||
"@hocuspocus/provider": "^2.13.5",
|
||||
"@plane/helpers": "*",
|
||||
"@plane/ui": "*",
|
||||
"@plane/utils": "*",
|
||||
"@tiptap/core": "^2.1.13",
|
||||
"@tiptap/extension-blockquote": "^2.1.13",
|
||||
"@tiptap/extension-character-count": "^2.6.5",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// plane helpers
|
||||
import { convertHexEmojiToDecimal } from "@plane/helpers";
|
||||
import { convertHexEmojiToDecimal } from "@plane/utils";
|
||||
// plane ui
|
||||
import { EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps } from "@plane/ui";
|
||||
// helpers
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
// plane helpers
|
||||
import { sanitizeHTML } from "@plane/helpers";
|
||||
import { sanitizeHTML } from "@plane/utils";
|
||||
// plane ui
|
||||
import { TEmojiLogoProps } from "@plane/ui";
|
||||
// types
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"devDependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^8.6.0",
|
||||
"@typescript-eslint/parser": "^8.6.0",
|
||||
"eslint": "8",
|
||||
"eslint": "8.57.1",
|
||||
"eslint-config-next": "^14.1.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-config-turbo": "^1.12.4",
|
||||
|
|
|
|||
|
|
@ -1,22 +0,0 @@
|
|||
export const convertHexEmojiToDecimal = (emojiUnified: string): string => {
|
||||
if (!emojiUnified) return "";
|
||||
|
||||
return emojiUnified
|
||||
.toString()
|
||||
.split("-")
|
||||
.map((e) => parseInt(e, 16))
|
||||
.join("-");
|
||||
};
|
||||
|
||||
export const emojiCodeToUnicode = (emoji: string) => {
|
||||
if (!emoji) return "";
|
||||
|
||||
// convert emoji code to unicode
|
||||
const uniCodeEmoji = emoji
|
||||
.toString()
|
||||
.split("-")
|
||||
.map((emoji) => parseInt(emoji, 10).toString(16))
|
||||
.join("-");
|
||||
|
||||
return uniCodeEmoji;
|
||||
};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./emoji.helper"
|
||||
export * from "./string.helper"
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export * from "./helpers";
|
||||
export * from "./hooks";
|
||||
3
packages/hooks/.eslintignore
Normal file
3
packages/hooks/.eslintignore
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
build/*
|
||||
dist/*
|
||||
out/*
|
||||
9
packages/hooks/.eslintrc.js
Normal file
9
packages/hooks/.eslintrc.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
4
packages/hooks/.prettierignore
Normal file
4
packages/hooks/.prettierignore
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
.turbo
|
||||
out/
|
||||
dist/
|
||||
build/
|
||||
5
packages/hooks/.prettierrc
Normal file
5
packages/hooks/.prettierrc
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"printWidth": 120,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
27
packages/hooks/package.json
Normal file
27
packages/hooks/package.json
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{
|
||||
"name": "@plane/hooks",
|
||||
"version": "0.24.0",
|
||||
"description": "React hooks that are 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": {
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,6 @@
|
|||
"jsx": "react",
|
||||
"lib": ["esnext", "dom"]
|
||||
},
|
||||
"include": ["."],
|
||||
"include": ["./src"],
|
||||
"exclude": ["dist", "build", "node_modules"]
|
||||
}
|
||||
|
|
@ -18,7 +18,8 @@
|
|||
"storybook": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build",
|
||||
"postcss": "postcss styles/globals.css -o styles/output.css --watch",
|
||||
"lint": "eslint src --ext .ts,.tsx"
|
||||
"lint": "eslint src --ext .ts,.tsx",
|
||||
"lint:errors": "eslint src --ext .ts,.tsx --quiet"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1",
|
||||
|
|
@ -31,7 +32,8 @@
|
|||
"@blueprintjs/popover2": "^1.13.3",
|
||||
"@headlessui/react": "^1.7.3",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@plane/helpers": "*",
|
||||
"@plane/hooks": "*",
|
||||
"@plane/utils": "*",
|
||||
"clsx": "^2.0.0",
|
||||
"emoji-picker-react": "^4.5.16",
|
||||
"lodash": "^4.17.21",
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Combobox } from "@headlessui/react";
|
|||
// popper-js
|
||||
import { usePopper } from "react-popper";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// components
|
||||
import { DropdownButton } from "./common";
|
||||
import { DropdownOptions } from "./common/options";
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ import { Combobox } from "@headlessui/react";
|
|||
// popper-js
|
||||
import { usePopper } from "react-popper";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// components
|
||||
import { DropdownButton } from "./common";
|
||||
import { DropdownOptions } from "./common/options";
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import React, { useEffect, useRef, useState } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// components
|
||||
import { ContextMenuItem } from "./item";
|
||||
// helpers
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Menu } from "@headlessui/react";
|
|||
import { usePopper } from "react-popper";
|
||||
import { ChevronDown, MoreHorizontal } from "lucide-react";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// hooks
|
||||
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
|
||||
// helpers
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Combobox } from "@headlessui/react";
|
|||
import { Check, ChevronDown, Info, Search } from "lucide-react";
|
||||
import { createPortal } from "react-dom";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// hooks
|
||||
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
|
||||
// helpers
|
||||
|
|
@ -97,10 +97,11 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
|
|||
<button
|
||||
ref={setReferenceElement}
|
||||
type="button"
|
||||
className={`flex w-full items-center justify-between gap-1 text-xs ${disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${customButtonClassName}`}
|
||||
className={`flex w-full items-center justify-between gap-1 text-xs ${
|
||||
disabled
|
||||
? "cursor-not-allowed text-custom-text-200"
|
||||
: "cursor-pointer hover:bg-custom-background-80"
|
||||
} ${customButtonClassName}`}
|
||||
onClick={toggleDropdown}
|
||||
>
|
||||
{customButton}
|
||||
|
|
@ -186,15 +187,13 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
|
|||
{selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
|
||||
{option.tooltip && (
|
||||
<>
|
||||
{
|
||||
typeof option.tooltip === "string" ? (
|
||||
<Tooltip tooltipContent={option.tooltip}>
|
||||
<Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
|
||||
</Tooltip>
|
||||
) : (
|
||||
option.tooltip
|
||||
)
|
||||
}
|
||||
{typeof option.tooltip === "string" ? (
|
||||
<Tooltip tooltipContent={option.tooltip}>
|
||||
<Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
|
||||
</Tooltip>
|
||||
) : (
|
||||
option.tooltip
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { usePopper } from "react-popper";
|
|||
import { Listbox } from "@headlessui/react";
|
||||
import { Check, ChevronDown } from "lucide-react";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// hooks
|
||||
import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
|
||||
// helpers
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { usePopper } from "react-popper";
|
|||
import { Popover, Tab } from "@headlessui/react";
|
||||
import EmojiPicker from "emoji-picker-react";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// helpers
|
||||
import { cn } from "../../helpers";
|
||||
// hooks
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { usePopper } from "react-popper";
|
|||
import EmojiPicker from "emoji-picker-react";
|
||||
import { Popover, Tab } from "@headlessui/react";
|
||||
// plane helpers
|
||||
import { useOutsideClickDetector } from "@plane/helpers";
|
||||
import { useOutsideClickDetector } from "@plane/hooks";
|
||||
// components
|
||||
import { IconsList } from "./icons-list";
|
||||
// helpers
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React, { FC, Fragment } from "react";
|
|||
import { Tab } from "@headlessui/react";
|
||||
import { LucideProps } from "lucide-react";
|
||||
// helpers
|
||||
import { useLocalStorage } from "@plane/helpers";
|
||||
import { useLocalStorage } from "@plane/hooks";
|
||||
import { cn } from "../../helpers";
|
||||
|
||||
type TabItem = {
|
||||
|
|
|
|||
3
packages/utils/.eslintignore
Normal file
3
packages/utils/.eslintignore
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
build/*
|
||||
dist/*
|
||||
out/*
|
||||
9
packages/utils/.eslintrc.js
Normal file
9
packages/utils/.eslintrc.js
Normal file
|
|
@ -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,
|
||||
},
|
||||
};
|
||||
5
packages/utils/.prettierrc
Normal file
5
packages/utils/.prettierrc
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"printWidth": 120,
|
||||
"tabWidth": 2,
|
||||
"trailingComma": "es5"
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@plane/helpers",
|
||||
"name": "@plane/utils",
|
||||
"version": "0.24.0",
|
||||
"description": "Helper functions shared across multiple apps internally",
|
||||
"private": true,
|
||||
|
|
@ -10,16 +10,19 @@
|
|||
"dist/**"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsup ./index.ts --format esm,cjs --dts --external react --minify"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.5.4",
|
||||
"@types/react": "^18.3.11",
|
||||
"tsup": "^7.2.0",
|
||||
"typescript": "^5.6.2"
|
||||
"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"
|
||||
}
|
||||
}
|
||||
60
packages/utils/src/color.ts
Normal file
60
packages/utils/src/color.ts
Normal file
|
|
@ -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)}`;
|
||||
40
packages/utils/src/emoji.ts
Normal file
40
packages/utils/src/emoji.ts
Normal file
|
|
@ -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;
|
||||
};
|
||||
3
packages/utils/src/index.ts
Normal file
3
packages/utils/src/index.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export * from "./color";
|
||||
export * from "./emoji";
|
||||
export * from "./string";
|
||||
|
|
@ -12,4 +12,4 @@ import DOMPurify from "isomorphic-dompurify";
|
|||
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
|
||||
};
|
||||
};
|
||||
9
packages/utils/tsconfig.json
Normal file
9
packages/utils/tsconfig.json
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"extends": "@plane/typescript-config/react-library.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react",
|
||||
"lib": ["esnext", "dom"]
|
||||
},
|
||||
"include": ["./src"],
|
||||
"exclude": ["dist", "build", "node_modules"]
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue