pixelize-design-library 3.0.1-beta.1 → 3.1.0

package/dist/esm/Utils/table.js

@@ -0,0 +1,319 @@
+import { useDebouncedCallback } from "../Hooks/useDebounce.js";
+import React from "react";
+import { AA_NORMAL_TEXT, DEFAULT_BLACK, DEFAULT_WHITE, onFilled, } from "../Theme/tokens/builders/accentText.js";
+import { compositeOver } from "../Theme/tokens/builders/color.js";
+import { liftToContrast } from "../Theme/tokens/builders/outlineRung.js";
+import { labelOnFill, solidFillRung } from "../Theme/tokens/builders/filledSurface.js";
+import { resolveAvatarFill } from "../Theme/tokens/builders/statusTone.js";
+import { resolveSoftTone } from "../Theme/tokens/builders/tone.js";
+// NOTE: built once — sorting 10k rows runs this ~130k times and a Collator is costly to construct.
+const COLLATOR = new Intl.Collator(undefined, {
+    numeric: true,
+    sensitivity: "base",
+});
+const HAS_DIGIT = /\d/;
+// Type-aware, null-safe comparison: numbers and dates detected, else numeric-aware locale compare.
+export function compareValues(aRaw, bRaw, direction) {
+    if (direction === "none")
+        return 0;
+    const dir = direction === "asc" ? 1 : -1;
+    const a = getStringValue(aRaw);
+    const b = getStringValue(bRaw);
+    const aEmpty = a === "";
+    const bEmpty = b === "";
+    if (aEmpty && bEmpty)
+        return 0;
+    if (aEmpty)
+        return 1; // nulls/empties always last
+    if (bEmpty)
+        return -1;
+    const an = Number(a);
+    const bn = Number(b);
+    if (!Number.isNaN(an) && !Number.isNaN(bn))
+        return (an - bn) * dir;
+    // NOTE: skips Date.parse on text columns with no digits — cheap and safe, since no digit means no date.
+    if (HAS_DIGIT.test(a) && HAS_DIGIT.test(b)) {
+        const ad = Date.parse(a);
+        const bd = Date.parse(b);
+        if (!Number.isNaN(ad) && !Number.isNaN(bd))
+            return (ad - bd) * dir;
+    }
+    return COLLATOR.compare(a, b) * dir;
+}
+export function SortMultiColumnData(data, sortConfig) {
+    const active = sortConfig.filter((s) => s.direction !== "none");
+    if (!active.length)
+        return data;
+    return [...data].sort((a, b) => {
+        for (const { column, direction } of active) {
+            const r = compareValues(a[column], b[column], direction);
+            if (r !== 0)
+                return r;
+        }
+        return 0;
+    });
+}
+/** Theme-aware status palette per value — soft fill + semantic ink from `resolveStatusTone`. */
+export function buildSemanticStatusPalette(toneByValue, theme) {
+    const c = theme.colors;
+    const scales = {
+        info: c.semantic.info,
+        warning: c.semantic.warning,
+        success: c.semantic.success,
+        error: c.semantic.error,
+        neutral: c.gray,
+    };
+    return Object.fromEntries(Object.entries(toneByValue).map(([value, key]) => {
+        const scale = scales[key];
+        const tone = resolveSoftTone(c, scale);
+        const solidRung = solidFillRung(scale, c.white, c.backgroundColor.main);
+        const solid = scale[solidRung];
+        return [
+            value,
+            {
+                solid,
+                soft: tone.bg,
+                text: tone.fg,
+                onSolid: labelOnFill(solid, c.white, c.black),
+            },
+        ];
+    }));
+}
+const withAlpha = (hex, aa) => /^#([0-9a-fA-F]{6})$/.test(hex) ? `${hex}${aa}` : hex;
+/** Consumer `statusColors` values are fill seeds — derive bleed + pill ink from them. */
+const resolveStatusOverride = (fill, white, black, surface) => {
+    const soft = withAlpha(fill, "22");
+    const solid = resolveAvatarFill(fill);
+    return {
+        solid,
+        soft,
+        text: liftToContrast(fill, compositeOver(soft, surface), AA_NORMAL_TEXT),
+        onSolid: onFilled(solid, white, black),
+    };
+};
+/** Deterministic, theme-aware color palette for groups + status pills. */
+export function buildTablePalette(theme) {
+    const c = theme.colors;
+    const scales = [
+        c.primary,
+        c.semantic.success,
+        c.semantic.info,
+        c.semantic.warning,
+        c.teal,
+        c.blue,
+        c.pink,
+        c.semantic.error,
+        c.orange,
+        c.purple,
+    ];
+    return scales.map((scale) => {
+        const tone = resolveSoftTone(c, scale);
+        const solidRung = solidFillRung(scale, c.white, c.backgroundColor.main);
+        const solid = scale[solidRung];
+        return {
+            solid,
+            soft: tone.bg,
+            text: tone.fg,
+            onSolid: labelOnFill(solid, c.white, c.black),
+        };
+    });
+}
+const hashKey = (value) => {
+    const s = String(value);
+    let h = 0;
+    for (let i = 0; i < s.length; i++)
+        h = (h * 31 + s.charCodeAt(i)) >>> 0;
+    return h;
+};
+/** Pick a deterministic palette color for a value, with optional consumer override hex. */
+export function pickTableColor(value, palette, override, theme) {
+    var _a;
+    const white = theme ? theme.colors.white : DEFAULT_WHITE;
+    const black = theme ? theme.colors.black : DEFAULT_BLACK;
+    if (override) {
+        const surface = (_a = theme === null || theme === void 0 ? void 0 : theme.colors.background[50]) !== null && _a !== void 0 ? _a : DEFAULT_WHITE;
+        return resolveStatusOverride(override, white, black, surface);
+    }
+    if (!palette.length) {
+        throw new Error("pickTableColor: empty palette — build it with buildTablePalette(theme).");
+    }
+    return palette[hashKey(value) % palette.length];
+}
+// Partitions rows by a column, preserving first-seen group order; groups by readable text, not object identity.
+export function groupRows(data, groupBy) {
+    const order = [];
+    const map = new Map();
+    for (const row of data) {
+        const text = getStringValue(row[groupBy]);
+        const key = text === "" ? "—" : text;
+        if (!map.has(key)) {
+            map.set(key, []);
+            order.push(key);
+        }
+        map.get(key).push(row);
+    }
+    return order.map((value) => ({ value, label: String(value), rows: map.get(value) }));
+}
+export const calculateLeftOffset = (columns, index) => {
+    return columns.slice(0, index).reduce((sum, width) => sum + width, 0);
+};
+const extractTextFromReactNode = (node) => {
+    if (typeof node === "string" || typeof node === "number") {
+        return String(node);
+    }
+    if (Array.isArray(node)) {
+        return node.map(extractTextFromReactNode).join(" ");
+    }
+    if (React.isValidElement(node)) {
+        const element = node;
+        return extractTextFromReactNode(element.props.children);
+    }
+    return "";
+};
+/** Best-effort readable text for an entity object (user/relation/option/etc.). */
+const objectToText = (o) => {
+    var _a, _b;
+    if (typeof o.label === "string" || typeof o.label === "number")
+        return String(o.label);
+    if (typeof o.name === "string" || typeof o.name === "number")
+        return String(o.name);
+    const first = (_a = o.first_name) !== null && _a !== void 0 ? _a : o.firstName;
+    const last = (_b = o.last_name) !== null && _b !== void 0 ? _b : o.lastName;
+    if (typeof first === "string" || typeof last === "string") {
+        return `${first !== null && first !== void 0 ? first : ""} ${last !== null && last !== void 0 ? last : ""}`.trim();
+    }
+    if (typeof o.full_name === "string")
+        return o.full_name;
+    if (typeof o.title === "string")
+        return o.title;
+    if (typeof o.company_name === "string")
+        return o.company_name;
+    if (typeof o.email === "string")
+        return o.email;
+    if (typeof o.value === "string" || typeof o.value === "number")
+        return String(o.value);
+    return "";
+};
+// Readable string for any cell value: primitives, React elements, entity objects, or arrays of those.
+const getStringValue = (value) => {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+        return String(value);
+    }
+    if (React.isValidElement(value)) {
+        return extractTextFromReactNode(value);
+    }
+    if (Array.isArray(value)) {
+        return value.map(getStringValue).filter((s) => s !== "").join(", ");
+    }
+    if (typeof value === "object") {
+        return objectToText(value);
+    }
+    return "";
+};
+// When a column has no `node`, plain objects (relation/user fields) can't be passed as React children.
+export function normalizeTableCellValue(value) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "string" ||
+        typeof value === "number" ||
+        typeof value === "boolean") {
+        return value;
+    }
+    if (React.isValidElement(value)) {
+        return value;
+    }
+    return getStringValue(value);
+}
+export const searchAndSortData = (data, searchValues) => {
+    const filteredData = data.filter((item) => {
+        return Object.keys(searchValues).every((key) => {
+            const searchValue = searchValues[key].toLowerCase();
+            const itemValue = getStringValue(item[key]).toLowerCase();
+            return itemValue.includes(searchValue);
+        });
+    });
+    return filteredData.sort((a, b) => {
+        let aMatchCount = 0;
+        let bMatchCount = 0;
+        Object.keys(searchValues).forEach((key) => {
+            const searchValue = searchValues[key].toLowerCase();
+            const aValue = getStringValue(a[key]).toLowerCase();
+            const bValue = getStringValue(b[key]).toLowerCase();
+            if (aValue === searchValue)
+                aMatchCount++;
+            if (bValue === searchValue)
+                bMatchCount++;
+            if (aValue.includes(searchValue))
+                aMatchCount += 0.5;
+            if (bValue.includes(searchValue))
+                bMatchCount += 0.5;
+        });
+        return bMatchCount - aMatchCount;
+    });
+};
+export function debounce(func, delay) {
+    let timer;
+    return (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+}
+export const useDebounce = useDebouncedCallback;
+export const pageSizeCalculation = (records) => {
+    const pageSize = [5, 10];
+    if (records > 100) {
+        return [25, 50, 100];
+    }
+    else if (records > 50) {
+        return [5, 10, 20];
+    }
+    return pageSize;
+};
+export const TableCellCalculation = ({ isFrozen, columnWidths, headerIndex, isCheckbox, header, row, freezedBgColor, index, theme, }) => {
+    var _a, _b, _c, _d;
+    const leftOffset = isFrozen
+        ? calculateLeftOffset(columnWidths, headerIndex) + (isCheckbox ? 50 : 0)
+        : 0;
+    const cellStyles = row.cellStyle;
+    const rowStyle = row.rowStyle;
+    let cellBgColor = undefined;
+    let cellTextColor = undefined;
+    if (cellStyles === null || cellStyles === void 0 ? void 0 : cellStyles[header.id]) {
+        cellBgColor =
+            (_b = (_a = cellStyles[header.id]) === null || _a === void 0 ? void 0 : _a.bg) !== null && _b !== void 0 ? _b : theme.colors.backgroundColor.light;
+        cellTextColor = (_d = (_c = cellStyles[header.id]) === null || _c === void 0 ? void 0 : _c.color) !== null && _d !== void 0 ? _d : undefined;
+    }
+    else if (isFrozen) {
+        cellBgColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+        cellTextColor = freezedBgColor !== null && freezedBgColor !== void 0 ? freezedBgColor : undefined;
+    }
+    else if (index % 2 === 1) {
+        cellBgColor = theme.colors.backgroundColor.light;
+    }
+    let rowBgColor = undefined;
+    let rowTextColor = undefined;
+    if (rowStyle) {
+        rowBgColor = rowStyle.bg;
+        rowTextColor = rowStyle.color;
+    }
+    return { leftOffset, cellBgColor, rowBgColor, cellTextColor, rowTextColor };
+};
+// Filters an array of objects by checking all property values against the search query.
+export function globalSearchFilter(data, query) {
+    if (!query.trim())
+        return data;
+    const lowerQuery = query.toLowerCase();
+    return data.filter((item) => Object.values(item).some((val) => {
+        if (val === null ||
+            val === undefined ||
+            typeof val === "object" ||
+            typeof val === "function") {
+            return false;
+        }
+        return String(val).toLowerCase().includes(lowerQuery);
+    }));
+}

package/dist/esm/Utils/tabular.js

@@ -0,0 +1,56 @@
+const NEEDS_QUOTES = /[",\r\n]/;
+const FORMULA_TRIGGER = /^[=+\-@\t\r]/;
+const PLAIN_NUMBER = /^[+-]?(?:\d[\d,]*(?:\.\d*)?|\.\d+)%?$/;
+const BOM = "";
+const RESERVED_FILE_CHARS = /[\\/:*?"<>|\p{Cc}]/gu;
+const MAX_FILE_NAME = 80;
+const REVOKE_DELAY_MS = 1000;
+const quote = (text) => (NEEDS_QUOTES.test(text) ? `"${text.replace(/"/g, '""')}"` : text);
+const looksLikeFormula = (text) => FORMULA_TRIGGER.test(text) && !PLAIN_NUMBER.test(text);
+function cellText(value, escapeFormulas) {
+    if (value === null || value === undefined)
+        return "";
+    if (typeof value === "number")
+        return Number.isFinite(value) ? String(value) : "";
+    const text = String(value);
+    if (typeof value !== "string" || !escapeFormulas)
+        return text;
+    return looksLikeFormula(text) ? `'${text}` : text;
+}
+function readCell(row, column) {
+    const field = row[column.key];
+    const format = column.format;
+    return format === undefined ? field : format(field, row);
+}
+/** RFC 4180 CSV: header line, then one CRLF-separated line per row. */
+export function toCsv(rows, columns, { bom = false } = {}) {
+    if (columns.length === 0)
+        return "";
+    const lines = [columns.map((column) => quote(column.header)).join(",")];
+    for (const row of rows) {
+        lines.push(columns.map((column) => quote(cellText(readCell(row, column), column.escapeFormulas !== false))).join(","));
+    }
+    return (bom ? BOM : "") + lines.join("\r\n");
+}
+/** Replaces path and reserved characters with `-`; caps at 80 characters, keeping the extension. */
+export function safeFileName(fileName) {
+    const cleaned = fileName.replace(RESERVED_FILE_CHARS, "-").trim().replace(/^[.\s]+/, "");
+    if (cleaned === "")
+        return "export";
+    if (cleaned.length <= MAX_FILE_NAME)
+        return cleaned;
+    const dot = cleaned.lastIndexOf(".");
+    const extension = dot > 0 && cleaned.length - dot <= 8 ? cleaned.slice(dot) : "";
+    return cleaned.slice(0, MAX_FILE_NAME - extension.length).replace(/[\uD800-\uDBFF]$/, "") + extension;
+}
+/** Saves `blob` as `safeFileName(fileName)`, then revokes its object URL. */
+export function downloadBlob(blob, fileName) {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = safeFileName(fileName);
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(url), REVOKE_DELAY_MS);
+}

package/dist/esm/Utils/validation.js

@@ -0,0 +1,73 @@
+export const EMAIL_REGEX = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+export const defaultValidationMessages = {
+    email_required: "Email is required",
+    email_invalid: "Enter a valid email address",
+    password_required: "Password is required",
+    password_min: "Password must be at least {min} characters",
+    required: "{label} is required",
+    positive_number: "{label} must be a positive number",
+    file_type: "Unsupported file type",
+    file_too_large: "File must be smaller than {max}MB",
+    video_type: "Unsupported video type",
+    youtube_required: "YouTube URL is required",
+    youtube_invalid: "Enter a valid YouTube URL",
+};
+export function validateEmail(value) {
+    if (!value.trim())
+        return "email_required";
+    if (!EMAIL_REGEX.test(value.trim()))
+        return "email_invalid";
+    return undefined;
+}
+export function validatePassword(value, minLength = 6) {
+    if (!value)
+        return "password_required";
+    if (value.length < minLength)
+        return "password_min";
+    return undefined;
+}
+export function validateRequired(value) {
+    if (!value.trim())
+        return "required";
+    return undefined;
+}
+export function validatePositiveNumber(value) {
+    if (!value.trim())
+        return "required";
+    const n = Number(value);
+    if (Number.isNaN(n) || n <= 0)
+        return "positive_number";
+    return undefined;
+}
+const DEFAULT_FILE_TYPES = new Set(["application/pdf", "image/jpeg", "image/png", "image/jpg"]);
+export function validateFileType(file, allowed = DEFAULT_FILE_TYPES) {
+    return allowed.has(file.type) ? undefined : "file_type";
+}
+export function validateFileSize(file, maxMB) {
+    return file.size > maxMB * 1024 * 1024 ? "file_too_large" : undefined;
+}
+export function validateFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const DEFAULT_VIDEO_TYPES = new Set(["video/mp4", "video/quicktime"]);
+export function validateVideoFileType(file, allowed = DEFAULT_VIDEO_TYPES) {
+    return allowed.has(file.type) ? undefined : "video_type";
+}
+export function validateVideoFile(file, maxMB, allowed) {
+    var _a;
+    return (_a = validateVideoFileType(file, allowed)) !== null && _a !== void 0 ? _a : validateFileSize(file, maxMB);
+}
+const YOUTUBE_HOSTS = new Set(["youtube.com", "www.youtube.com", "m.youtube.com", "youtu.be"]);
+export function validateYoutubeUrl(value) {
+    if (!value.trim())
+        return "youtube_required";
+    let url;
+    try {
+        url = new URL(value.trim());
+    }
+    catch {
+        return "youtube_invalid";
+    }
+    return YOUTUBE_HOSTS.has(url.hostname.toLowerCase()) ? undefined : "youtube_invalid";
+}