primevue-mirror/packages/themes/scripts/build-tokens.js

const fs = require('fs');
const path = require('path');
const prettier = require('prettier');

// prettier-ignore
const THEME_COMPONENTS = [
    'Accordion',
    'AutoComplete',
    'Avatar',
    'Badge',
    'BlockUI',
    'Breadcrumb',
    'Button',
    'Card',
    'Carousel',
    'CascadeSelect',
    'Checkbox',
    'Chip',
    'ColorPicker',
    'ConfirmDialog',
    'ConfirmPopup',
    'ContextMenu',
    'DataTable',
    'DataView',
    'DatePicker',
    'Dialog',
    'Divider',
    'Dock',
    'Drawer',
    'Editor',
    'Fieldset',
    'FileUpload',
    'FloatLabel',
    'Galleria',
    'IconField',
    'IftaLabel',
    'Image',
    'ImageCompare',
    'InlineMessage',
    'Inplace',
    'InputChips',
    'InputGroup',
    'InputNumber',
    'InputText',
    'Knob',
    'Listbox',
    'MegaMenu',
    'Menu',
    'Menubar',
    'Message',
    'MeterGroup',
    'MultiSelect',
    'OrderList',
    'OrganizationChart',
    'OverlayBadge',
    'Paginator',
    'Panel',
    'PanelMenu',
    'Password',
    'PickList',
    'Popover',
    'ProgressBar',
    'ProgressSpinner',
    'RadioButton',
    'Rating',
    'Ripple',
    'ScrollPanel',
    'Select',
    'SelectButton',
    'Skeleton',
    'Slider',
    'SpeedDial',
    'SplitButton',
    'Splitter',
    'Stepper',
    'Steps',
    'Tabmenu',
    'Tabs',
    'TabView',
    'Tag',
    'Terminal',
    'Textarea',
    'TieredMenu',
    'Timeline',
    'Toast',
    'ToggleButton',
    'ToggleSwitch',
    'Toolbar',
    'Tooltip',
    'Tree',
    'TreeSelect',
    'TreeTable'
];

const themeName = 'aura';
const rootDir = path.resolve(__dirname, '../');
const overwrittenDirPath = path.resolve(rootDir, 'types/overwritten');

try {
    !fs.existsSync(overwrittenDirPath) && fs.mkdirSync(overwrittenDirPath, { recursive: true });
} catch (err) {
    console.error(err);
}

THEME_COMPONENTS.forEach(async (comp) => {
    const data = fs.readFileSync(path.resolve(rootDir, `src/presets/${themeName}/${comp.toLowerCase()}/index.js`), { encoding: 'utf8', flag: 'r' });
    let theme = data.replace('export default', 'module.exports = ');

    try {
        fs.writeFileSync(path.resolve(rootDir, `types/overwritten/${comp.toLowerCase()}.js`), theme);

        const component = require(path.resolve(rootDir, `types/overwritten/${comp.toLowerCase()}.js`));
        const filePath = path.resolve(rootDir, `types/${comp.toLowerCase()}`);
        let outputFile = path.resolve(filePath, `index.d.ts`);
        let defaultText = '';

        !fs.existsSync(filePath) && fs.mkdirSync(filePath);

        const splitTokenName = (text) => {
            return text.split(/(?=[A-Z])/).map((part) => part.toLowerCase());
        };

        const createSubTokens = (tokenKeys, tokenValue) => {
            let subTokens = '';

            Object.entries(tokenValue).forEach(([tokenKey, tokenSubValue]) => {
                if (typeof tokenSubValue === 'string') {
                    subTokens += createToken([...tokenKeys, tokenKey]);
                } else {
                    subTokens += createNestedToken([...tokenKeys, tokenKey], tokenSubValue);
                }
            });

            return subTokens;
        };

        const createDescription = (tokenKeys) => {
            let description = '';

            tokenKeys.forEach((tokenPart, i) => {
                if (i !== 0) description += `${splitTokenName(tokenPart).join(' ')} `;
            });
            description = description.charAt(0).toUpperCase() + description.slice(1);

            return `${description}of ${splitTokenName(tokenKeys[0]).join(' ')}`;
        };

        const createToken = (tokenKey) => {
            let tokenName = tokenKey[tokenKey.length - 1];
            let designTokenName = `${comp.toLowerCase()}`;
            let tokenDescription = createDescription(tokenKey);

            tokenKey.forEach((t) => {
                if (t !== 'root') {
                    designTokenName += `.${splitTokenName(t).join('.')}`;
                }

                if (tokenName.indexOf('.') > -1 && tokenName.indexOf("'")) {
                    tokenName = `'${tokenName}'`;
                }
            });

            return `
    /**
    * ${tokenDescription}
    *
    * @designToken ${designTokenName}
    */
    ${tokenName}?: string;`;
        };

        const createNestedToken = (tokenKeys, tokenValue) => {
            let tokenName = tokenKeys[tokenKeys.length - 1];
            let tokenDescription = createDescription(tokenKeys);

            return `
    /**
    * ${tokenDescription}
    */
    ${tokenName}?: {
        ${createSubTokens(tokenKeys, tokenValue)}
    };`;
        };

        const generateTokens = (tokenKey, tokenValue) => {
            let subTokens = '';

            Object.entries(tokenValue).forEach(([subTokenKey, subTokenValue]) => {
                if (typeof subTokenValue === 'string') {
                    subTokens += createToken([tokenKey, subTokenKey]);
                } else {
                    subTokens += createNestedToken([tokenKey, subTokenKey], subTokenValue);
                }
            });

            defaultText += `
    /**
    * Used to pass tokens of the ${splitTokenName(tokenKey).join(' ')} section
    */
    ${tokenKey}?: {
        ${subTokens}
    }`;
        };

        Object.entries(component).forEach(([tname, tvalue]) => {
            if (tname !== 'colorScheme') {
                if (Object.keys(component).includes('colorScheme')) {
                    if (Object.keys(component['colorScheme']['light']).includes(tname)) {
                        tvalue = { ...tvalue, ...component['colorScheme']['light'][tname] };
                    }
                }

                generateTokens(tname, tvalue);
            } else {
                Object.entries(tvalue['light']).forEach(([subtname, subtvalue]) => {
                    if (!Object.keys(component).includes(subtname)) {
                        generateTokens(subtname, subtvalue);
                    }
                });
            }
        });

        let text = `
/**
 *
 * ${comp} Design Tokens
 *
 * [Live Demo](https://www.primevue.org/${comp.toLowerCase()}/)
 *
 * @module themes/${comp.toLowerCase()}
 *
 */

import { ColorSchemeDesignToken } from '..';

export interface ${comp}DesignTokens extends ColorSchemeDesignToken<${comp}DesignTokens> {
${defaultText}
}
`;

        const prettierConfig = await prettier.resolveConfig(__dirname);
        const formattedText = prettier.format(text, { ...prettierConfig, parser: 'typescript' });

        fs.writeFileSync(outputFile, formattedText, 'utf8');
    } catch (err) {
        console.error(err);
    }
});

try {
    if (fs.existsSync(overwrittenDirPath)) {
        fs.rmSync(overwrittenDirPath, { recursive: true, force: true });
    }
} catch (err) {
    console.error(err);
}