@kevlid/discordmenus 0.0.2

package/src/render/list.js

@@ -0,0 +1,347 @@
+const { ComponentTypes, ButtonStyles } = require("./types");
+const { OptionTypes } = require("../utils/types");
+const {
+    renderButton,
+    renderSeparator,
+    renderTextDisplay,
+    renderActionRow,
+    renderHeader,
+    renderSubOptionSection,
+    validateString,
+    validateNumber,
+} = require("./utils");
+const { encodeId, Presets } = require("../utils/customIds");
+const { ComponentsV2MessageFlags } = require("../utils/constants");
+const ModalInputPrefix = "m";
+
+
+function renderListPage(menuKey, option, items, listPageIndex, userId, category, page) {
+    const itemsPerPage = 1;
+    let safeItems;
+    if (Array.isArray(items)) {
+        safeItems = items;
+    } else {
+        safeItems = [];
+    }
+    const totalPages = Math.max(1, Math.ceil(safeItems.length / itemsPerPage));
+    const clampedPage = Math.min(Math.max(0, listPageIndex), totalPages - 1);
+    const start = clampedPage * itemsPerPage;
+    const pageItems = safeItems.slice(start, start + itemsPerPage);
+    const ctx = { u: userId, cat: category, page, sub: clampedPage };
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+    const headerText = renderHeader(option.title, option.description);
+    const headerDisplay = renderTextDisplay(headerText);
+    const divider = renderSeparator(true);
+    const containerComponents = [headerDisplay, divider];
+    if (pageItems.length === 0) {
+        containerComponents.push(renderTextDisplay("`(no items)`"));
+    } else {
+        for (const [i, item] of pageItems.entries()) {
+            const itemComponent = renderListItem(menuKey, option, item, start + i, ctx);
+            containerComponents.push(itemComponent);
+        }
+    }
+    const hasPrev = clampedPage > 0;
+    const hasNext = clampedPage < totalPages - 1;
+    const isLastItem = clampedPage >= totalPages - 1;
+    const currentAbsIndex = start;
+
+    const jumpItems = Math.min(10, Math.max(1, Math.ceil(safeItems.length * 0.1)));
+    const jumpPages = Math.max(1, Math.ceil(jumpItems / itemsPerPage));
+    const fastPrevPage = Math.max(0, clampedPage - jumpPages);
+    const fastNextPage = Math.min(totalPages - 1, clampedPage + jumpPages);
+
+    containerComponents.push(renderSeparator(true));
+
+    const addButton = renderButton(genId(option.key, OptionTypes.List, Presets.add), "Add", ButtonStyles.Success, !isLastItem);
+    const deleteButton = renderButton(genId(option.key, OptionTypes.List, Presets.delete, String(currentAbsIndex)), "Delete", ButtonStyles.Danger, safeItems.length <= 0);
+    containerComponents.push(renderActionRow(addButton, deleteButton));
+
+    const navRow = renderActionRow(
+        renderButton(genId(option.key, OptionTypes.List, Presets.nav, String(fastPrevPage), "fastl"), "<<", ButtonStyles.Secondary, fastPrevPage === clampedPage),
+        renderButton(genId(option.key, OptionTypes.List, Presets.nav, String(clampedPage - 1)), "<", ButtonStyles.Secondary, !hasPrev),
+        renderButton(genId(option.key, OptionTypes.List, Presets.done), "Done", ButtonStyles.Secondary),
+        renderButton(genId(option.key, OptionTypes.List, Presets.nav, String(clampedPage + 1)), ">", ButtonStyles.Secondary, !hasNext),
+        renderButton(genId(option.key, OptionTypes.List, Presets.nav, String(fastNextPage), "fastr"), ">>", ButtonStyles.Secondary, fastNextPage === clampedPage),
+    );
+
+    const visible = containerComponents.filter(c => c && typeof c === "object" && "type" in c);
+    return {
+        flags: ComponentsV2MessageFlags,
+        components: [{ type: ComponentTypes.Container, components: visible }, navRow],
+    };
+}
+
+function renderListItem(menuKey, option, value, absIndex, ctx) {
+    let displayValue;
+    if (value != null) {
+        if (typeof value === "object") {
+            const props = option.itemType === OptionTypes.Object && Array.isArray(option.itemConfig?.properties)
+                ? option.itemConfig.properties
+                : null;
+            const maxPreviewLines = 4;
+            if (props && props.length > 0) {
+                const lines = [];
+                const slice = props.slice(0, maxPreviewLines);
+                for (const p of slice) {
+                    const entryValue = value[p.key];
+                    let printable;
+                    if (entryValue == null) {
+                        printable = "(not set)";
+                    } else if (typeof entryValue === "object") {
+                        printable = JSON.stringify(entryValue);
+                    } else {
+                        printable = String(entryValue);
+                    }
+                    lines.push(`${p.key}: ${printable}`);
+                }
+                if (props.length > maxPreviewLines) {
+                    lines.push(`... +${props.length - maxPreviewLines} more`);
+                }
+                displayValue = lines.join("\n");
+            } else {
+                const entries = Object.entries(value);
+                if (entries.length <= 0) {
+                    displayValue = "(empty object)";
+                } else {
+                    const lines = [];
+                    const previewEntries = entries.slice(0, maxPreviewLines);
+                    for (const [key, entryValue] of previewEntries) {
+                        let printable;
+                        if (entryValue == null) {
+                            printable = "(not set)";
+                        } else if (typeof entryValue === "object") {
+                            printable = JSON.stringify(entryValue);
+                        } else {
+                            printable = String(entryValue);
+                        }
+                        lines.push(`${key}: ${printable}`);
+                    }
+                    if (entries.length > maxPreviewLines) {
+                        lines.push(`... +${entries.length - maxPreviewLines} more`);
+                    }
+                    displayValue = lines.join("\n");
+                }
+            }
+        } else {
+            displayValue = String(value);
+        }
+    } else {
+        displayValue = "(not set)";
+    }
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+    const modifyButton = renderButton(genId(option.key, OptionTypes.List, Presets.edit, String(absIndex)), "Modify", ButtonStyles.Secondary);
+    const textContent = renderTextDisplay(displayValue.split("\n").map(line => `> ${line}`).join("\n"));
+    return renderSubOptionSection(textContent, modifyButton);
+}
+
+function renderListTextInput(option, currentValue, itemIndex) {
+    const isAdd = itemIndex == null;
+    let idValues;
+    if (isAdd) {
+        idValues = [option.key, OptionTypes.List, Presets.add];
+    } else {
+        idValues = [option.key, OptionTypes.List, Presets.edit, String(itemIndex)];
+    }
+    const genId = encodeId(ModalInputPrefix, idValues);
+    const cfg = option.itemConfig;
+    let component;
+    if (option.itemType === OptionTypes.String) {
+        const minLen = cfg.minLength ?? 0;
+        const maxLen = cfg.maxLength ?? 4000;
+        let value;
+        if (isAdd) {
+            value = "";
+        } else if (currentValue != null) {
+            value = validateString(String(currentValue), minLen, maxLen);
+        } else {
+            value = "";
+        }
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 2,
+            placeholder: cfg.description ?? "Enter a value...",
+            min_length: minLen,
+            max_length: maxLen,
+            required: minLen > 0,
+        };
+        if (value !== "") {
+            component.value = value;
+        }
+    } else if (option.itemType === OptionTypes.Number) {
+        let value;
+        if (isAdd) {
+            value = "";
+        } else if (currentValue != null) {
+            value = validateNumber(String(currentValue), cfg.minValue ?? -Infinity, cfg.maxValue ?? Infinity);
+        } else {
+            value = "";
+        }
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 1,
+            placeholder: cfg.description ?? "Enter a number...",
+            required: true,
+        };
+        if (value !== "") {
+            component.value = value;
+        }
+    } else {
+        throw new Error(`Item type "${option.itemType}" does not support modal input`);
+    }
+    let labelText;
+    if (isAdd) {
+        labelText = "Add item";
+    } else {
+        labelText = "Edit item";
+    }
+    return {
+        type: ComponentTypes.Label,
+        label: labelText,
+        description: null,
+        component: component,
+    };
+}
+
+function renderObjectListItemPage(menuKey, option, itemIndex, currentItem, userId, category, page, listPage, totalItems = 0) {
+    const ctx = { u: userId, cat: category, page, sub: listPage, item: itemIndex };
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+    let safeItem;
+    if (currentItem != null && typeof currentItem === "object") {
+        safeItem = currentItem;
+    } else {
+        safeItem = {};
+    }
+    const shownTotalItems = Math.max(totalItems, 1);
+    const headerText = renderHeader(option.title, `Editing item ${itemIndex + 1} of ${shownTotalItems}`);
+    const headerDisplay = renderTextDisplay(headerText);
+    const divider = renderSeparator(true);
+    const containerComponents = [headerDisplay, divider];
+    const properties = option.itemConfig.properties;
+    const propertyList = Array.isArray(properties) ? properties : [];
+    for (const [propertyIndex, property] of propertyList.entries()) {
+        const currentValue = safeItem[property.key] ?? null;
+        const propertySection = renderObjectListItemProperty(menuKey, option.key, property, propertyIndex, itemIndex, currentValue, ctx);
+        containerComponents.push(propertySection, renderSeparator());
+    }
+
+    const hasPreviousItem = itemIndex > 0;
+    const hasNextItem = totalItems > 0 && itemIndex < totalItems - 1;
+    const isLastItem = totalItems <= 0 || itemIndex >= totalItems - 1;
+
+    containerComponents.push(renderSeparator(true));
+
+    const addButton = renderButton(genId(option.key, OptionTypes.List, Presets.add), "Add", ButtonStyles.Success, !isLastItem);
+    const removeButton = renderButton(genId(option.key, OptionTypes.List, Presets.delete, String(itemIndex)), "Remove", ButtonStyles.Danger, totalItems <= 0);
+    containerComponents.push(renderActionRow(addButton, removeButton));
+
+    const navButtons = [
+        renderButton(genId(option.key, OptionTypes.List, Presets.previousCategory), "<<", ButtonStyles.Secondary, !hasPreviousItem),
+        renderButton(genId(option.key, OptionTypes.List, Presets.listItemView, String(itemIndex - 1)), "<", ButtonStyles.Secondary, !hasPreviousItem),
+        renderButton(genId(option.key, OptionTypes.List, Presets.listItemDone), "Done", ButtonStyles.Secondary),
+        renderButton(genId(option.key, OptionTypes.List, Presets.listItemView, String(itemIndex + 1)), ">", ButtonStyles.Secondary, !hasNextItem),
+        renderButton(genId(option.key, OptionTypes.List, Presets.nextCategory), ">>", ButtonStyles.Secondary, !hasNextItem)
+    ];
+
+    const doneRow = renderActionRow(...navButtons);
+    return {
+        flags: ComponentsV2MessageFlags,
+        components: [
+            { type: ComponentTypes.Container, components: containerComponents },
+            doneRow,
+        ],
+    };
+}
+
+function renderObjectListItemProperty(menuKey, optionKey, property, propertyIndex, itemIndex, currentValue, ctx) {
+    const genId = (...v) => encodeId(menuKey, v, ctx);
+    const titleSuffix = property.required ? " (required)" : "";
+    const lines = [`**${property.title}**${titleSuffix}`];
+    if (property.description) {
+        lines.push(`-# ${property.description}`);
+    }
+    let button;
+    if (property.type === OptionTypes.Boolean) {
+        const isTrue = Boolean(currentValue);
+        const newValue = isTrue ? "false" : "true";
+        const label = isTrue ? (property.trueLabel ?? "True") : (property.falseLabel ?? "False");
+        lines.push(`\`${label}\``);
+        button = renderButton(genId(optionKey, OptionTypes.List, Presets.listItemBoolToggle, String(itemIndex), String(propertyIndex), newValue), label, ButtonStyles.Secondary);
+    } else {
+        if (property.preview !== false) {
+            if (currentValue != null) {
+                lines.push(`\`${currentValue}\``);
+            } else if (!property.required) {
+                lines.push("`(not set)`");
+            }
+        }
+        button = renderButton(genId(optionKey, OptionTypes.List, Presets.listItemField, String(itemIndex), String(propertyIndex)), "Edit", ButtonStyles.Secondary);
+    }
+    const textContent = renderTextDisplay(lines.join("\n"));
+    return renderSubOptionSection(textContent, button);
+}
+
+function renderObjectListItemTextInput(option, property, currentValue) {
+    const propertyIndex = option.itemConfig.properties.findIndex(p => p.key === property.key);
+    let propertyToken;
+    if (propertyIndex >= 0) {
+        propertyToken = String(propertyIndex);
+    } else {
+        propertyToken = property.key;
+    }
+    const genId = encodeId(ModalInputPrefix, [option.key, OptionTypes.List, Presets.listItemModal, propertyToken]);
+    const cfg = property.itemConfig;
+    let component;
+    if (property.itemType === OptionTypes.String) {
+        const minLen = cfg.minLength ?? 0;
+        const maxLen = cfg.maxLength ?? 4000;
+        let prefill;
+        if (currentValue != null) {
+            prefill = validateString(String(currentValue), minLen, maxLen);
+        } else {
+            prefill = "";
+        }
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 2,
+            placeholder: property.description ?? "Enter a value...",
+            min_length: minLen,
+            max_length: maxLen,
+            required: property.required || minLen > 0,
+        };
+        if (prefill !== "") {
+            component.value = prefill;
+        }
+    } else if (property.itemType === OptionTypes.Number) {
+        let prefill;
+        if (currentValue != null) {
+            prefill = validateNumber(String(currentValue), cfg.minValue ?? -Infinity, cfg.maxValue ?? Infinity);
+        } else {
+            prefill = "";
+        }
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 1,
+            placeholder: property.description ?? "Enter a number...",
+            required: property.required,
+        };
+        if (prefill !== "") {
+            component.value = prefill;
+        }
+    } else {
+        throw new Error(`Property type "${property.itemType}" does not support modal input`);
+    }
+    return {
+        type: ComponentTypes.Label,
+        label: property.title,
+        description: property.description,
+        component: component,
+    };
+}
+
+
+module.exports = { renderListPage, renderListItem, renderListTextInput, renderObjectListItemPage, renderObjectListItemTextInput };

package/src/render/modal.js

@@ -0,0 +1,76 @@
+const { ComponentTypes } = require("./types");
+const { OptionTypes } = require("../utils/types");
+const { validateString, validateNumber } = require("./utils");
+const { encodeId, Presets } = require("../utils/customIds");
+const ModalInputPrefix = "m";
+
+
+function renderModal(menuKey, title, components, { category, page, sub, item, op } = {}) {
+    const opts = { cat: category, page, sub };
+    if (item != null) {
+        opts.item = item;
+    }
+    if (op != null) {
+        opts.op = op;
+    }
+    return {
+        custom_id: encodeId(menuKey, [], opts),
+        title: title,
+        components: components,
+    };
+}
+
+function renderTextInput(option, currentValue) {
+    const genId = encodeId(ModalInputPrefix, [option.key, option.type, Presets.modal]);
+    let component;
+    if (option.type === OptionTypes.String) {
+        const minLen = option.minLength ?? 0;
+        const maxLen = option.maxLength ?? 4000;
+        let prefill;
+        if (currentValue != null) {
+            prefill = validateString(String(currentValue), minLen, maxLen);
+        } else {
+            prefill = "";
+        }
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 2,
+            placeholder: option.description ?? "Enter a value...",
+            min_length: minLen,
+            max_length: maxLen,
+            required: minLen > 0,
+        };
+        if (prefill !== "") {
+            component.value = prefill;
+        }
+    } else if (option.type === OptionTypes.Number) {
+        let prefill;
+        if (currentValue != null) {
+            prefill = validateNumber(String(currentValue), option.minValue ?? -Infinity, option.maxValue ?? Infinity);
+        } else {
+            prefill = "";
+        }
+        component = {
+            type: ComponentTypes.TextInput,
+            custom_id: genId,
+            style: 1,
+            placeholder: option.description ?? "Enter a number...",
+            required: false,
+        };
+        if (prefill !== "") {
+            component.value = prefill;
+        }
+    } else {
+        throw new Error(`Option type "${option.type}" does not support modal input`);
+    }
+    return {
+        type: ComponentTypes.Label,
+        label: option.title,
+        description: option.description,
+        component: component,
+    };
+}
+
+
+module.exports = { renderModal, renderTextInput };