@entro314labs/at3-toolkit/dist/utils/cli-styling.js

Advanced development toolkit for AT3 Stack projects

import boxen from "boxen";
import chalk from "chalk";
import Table from "cli-table3";
import figures from "figures";
import gradient from "gradient-string";
// Cross-platform symbols
export const symbols = {
    success: figures.tick,
    error: figures.cross,
    warning: figures.warning,
    info: figures.info,
    arrow: figures.arrowRight,
    bullet: figures.bullet,
    pointer: figures.pointer,
    star: figures.star,
    heart: figures.heart,
    radioOn: figures.radioOn,
    radioOff: figures.radioOff,
    checkboxOn: figures.checkboxOn,
    checkboxOff: figures.checkboxOff,
};
// Color schemes for AIT3E branding
export const colors = {
    primary: chalk.hex("#2563eb"), // Blue
    secondary: chalk.hex("#7c3aed"), // Purple
    success: chalk.green,
    error: chalk.red,
    warning: chalk.yellow,
    info: chalk.blue,
    muted: chalk.gray,
    accent: chalk.magenta,
    ai: chalk.hex("#10b981"), // Emerald for AI features
};
// Gradient themes
const createGradients = () => ({
    ait3e: gradient(["#2563eb", "#7c3aed", "#10b981"]),
    primary: gradient(["#2563eb", "#1e40af"]),
    success: gradient(["#10b981", "#059669"]),
    rainbow: gradient.rainbow,
    morning: gradient.morning,
    atlas: gradient.atlas,
});
export const gradients = createGradients();
// Utility functions for consistent styling
export const style = {
    // Headers and titles
    title: (text) => gradients.ait3e(text),
    subtitle: (text) => colors.muted(text),
    header: (text) => colors.primary.bold(text),
    // Status indicators
    success: (text) => `${colors.success(symbols.success)} ${colors.success(text)}`,
    error: (text) => `${colors.error(symbols.error)} ${colors.error(text)}`,
    warning: (text) => `${colors.warning(symbols.warning)} ${colors.warning(text)}`,
    info: (text) => `${colors.info(symbols.info)} ${colors.info(text)}`,
    // Interactive elements
    selected: (text) => `${colors.primary(symbols.radioOn)} ${colors.primary(text)}`,
    unselected: (text) => `${colors.muted(symbols.radioOff)} ${colors.muted(text)}`,
    checked: (text) => `${colors.success(symbols.checkboxOn)} ${text}`,
    unchecked: (text) => `${colors.muted(symbols.checkboxOff)} ${colors.muted(text)}`,
    // Content formatting
    key: (text) => colors.primary(text),
    value: (text) => colors.muted(text),
    path: (text) => colors.accent(text),
    version: (text) => colors.secondary(text),
    command: (text) => colors.secondary.bold(`${text}`),
    muted: (text) => colors.muted(text),
    // Special formatting
    ai: (text) => `${colors.ai("🤖")} ${colors.ai(text)}`,
    edge: (text) => `${colors.accent("⚡")} ${colors.accent(text)}`,
    database: (text) => `${colors.primary("🗄️")} ${colors.primary(text)}`,
};
// Box utilities
export const box = {
    info: (content, title) => boxen(content, {
        padding: 1,
        margin: 1,
        borderStyle: "round",
        borderColor: "blue",
        ...(title && { title: colors.primary.bold(title) }),
    }),
    success: (content, title) => boxen(content, {
        padding: 1,
        margin: 1,
        borderStyle: "round",
        borderColor: "green",
        ...(title && { title: colors.success.bold(title) }),
    }),
    error: (content, title) => boxen(content, {
        padding: 1,
        margin: 1,
        borderStyle: "round",
        borderColor: "red",
        ...(title && { title: colors.error.bold(title) }),
    }),
    warning: (content, title) => boxen(content, {
        padding: 1,
        margin: 1,
        borderStyle: "round",
        borderColor: "yellow",
        ...(title && { title: colors.warning.bold(title) }),
    }),
    note: (content, title) => boxen(content, {
        padding: 1,
        margin: 1,
        borderStyle: "single",
        borderColor: "gray",
        ...(title && { title: colors.muted.bold(title) }),
    }),
};
// Table utilities
export const table = {
    create: (headers, options) => new Table({
        head: headers.map((h) => colors.primary.bold(h)),
        style: {
            head: [],
            border: ["gray"],
            compact: true,
        },
        ...options,
    }),
    dependencies: () => new Table({
        head: [
            colors.primary.bold("Package"),
            colors.primary.bold("Current"),
            colors.primary.bold("Latest"),
            colors.primary.bold("Status"),
        ],
        style: {
            head: [],
            border: ["gray"],
            compact: true,
        },
    }),
    features: () => new Table({
        head: [
            colors.primary.bold("Feature"),
            colors.primary.bold("Status"),
            colors.primary.bold("Description"),
        ],
        style: {
            head: [],
            border: ["gray"],
            compact: true,
        },
    }),
};
// Layout utilities
export const layout = {
    // Create consistent spacing
    spacing: {
        small: "\n",
        medium: "\n\n",
        large: "\n\n\n",
    },
    // Create separator lines
    separator: (char = "─", width = 50) => colors.muted(char.repeat(width)),
    // Create indented content
    indent: (content, level = 1) => {
        const spaces = "  ".repeat(level);
        return content
            .split("\n")
            .map((line) => `${spaces}${line}`)
            .join("\n");
    },
    // Create columns for data display
    columns: (data, keyWidth = 20) => {
        return data
            .map(({ key, value }) => `${colors.primary(key.padEnd(keyWidth))} ${colors.muted(value)}`)
            .join("\n");
    },
};
// Progress indicators
export const progress = {
    dots: (current, total) => {
        const completed = "●".repeat(current);
        const remaining = "○".repeat(total - current);
        return `${colors.primary(completed)}${colors.muted(remaining)}`;
    },
    percentage: (current, total) => {
        const percent = Math.round((current / total) * 100);
        return colors.secondary(`${percent}%`);
    },
    fraction: (current, total) => {
        return colors.muted(`${current}/${total}`);
    },
};
// Banner creation
export const banner = {
    ait3e: () => {
        const title = gradients.ait3e([
            "  ▄▄▄     ██▓▄▄▄█████▓▌ ██▓▓█████",
            " ▒████▄  ▓██▒▓  ██▒ ▓▒ ▒▓██▒▓█   ▀",
            " ▒██  ▀█▄▒██▒▒ ▓██░ ▒░ ░▒██▒▒███  ",
            " ░██▄▄▄▄██▒██░░ ▓██▓ ░  ░██░▒▓█  ▄",
            "  ▓█   ▓██▒██░  ▒██▒ ░   ██░░▒████▒",
            "  ▒▒   ▓▒█░▓    ▒ ░░   ░▓  ░░ ▒░ ░",
            "   ▒   ▒▒ ░▒ ░    ░     ▒ ░ ░ ░  ░",
            "   ░   ▒  ░▒ ░  ░       ▒ ░   ░   ",
            "       ░  ░░              ░    ░  ░",
        ].join("\n"));
        const subtitle = colors.muted("AT3 Toolset - Smart migration for AIT3E stack");
        return boxen(`${title}\n\n${subtitle}`, {
            padding: 1,
            margin: 1,
            borderStyle: "double",
            borderColor: "blue",
            align: "center",
        });
    },
    simple: (title, subtitle) => {
        const content = subtitle
            ? `${gradients.ait3e(title)}\n${colors.muted(subtitle)}`
            : gradients.ait3e(title);
        return boxen(content, {
            padding: 1,
            margin: { top: 1, bottom: 1, left: 0, right: 0 },
            borderStyle: "round",
            borderColor: "blue",
            align: "center",
        });
    },
};