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

253 lines
6.5 KiB
JavaScript
Raw Permalink Normal View History

2024-05-23 11:07:11 +00:00
const fs = require('fs');
const path = require('path');
// prettier-ignore
2024-10-03 13:18:21 +00:00
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',
2024-10-03 17:09:21 +00:00
'ImageCompare',
2024-10-03 13:18:21 +00:00
'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'
];
2024-05-23 11:07:11 +00:00
const themeName = 'aura';
const rootDir = path.resolve(__dirname, '../');
2024-06-11 12:21:12 +00:00
const overwrittenDirPath = path.resolve(rootDir, 'types/overwritten');
2024-05-23 11:07:11 +00:00
try {
!fs.existsSync(overwrittenDirPath) && fs.mkdirSync(overwrittenDirPath, { recursive: true });
} catch (err) {
console.error(err);
}
THEME_COMPONENTS.forEach((comp) => {
2024-06-11 12:21:12 +00:00
const data = fs.readFileSync(path.resolve(rootDir, `src/presets/${themeName}/${comp.toLowerCase()}/index.js`), { encoding: 'utf8', flag: 'r' });
2024-05-23 11:07:11 +00:00
let theme = data.replace('export default', 'module.exports = ');
try {
2024-06-11 12:21:12 +00:00
fs.writeFileSync(path.resolve(rootDir, `types/overwritten/${comp.toLowerCase()}.js`), theme);
2024-05-23 11:07:11 +00:00
2024-06-11 12:21:12 +00:00
const component = require(path.resolve(rootDir, `types/overwritten/${comp.toLowerCase()}.js`));
const filePath = path.resolve(rootDir, `types/${comp.toLowerCase()}`);
2024-05-23 11:07:11 +00:00
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}
}
`;
fs.writeFileSync(outputFile, text, 'utf8');
} catch (err) {
console.error(err);
}
});
try {
if (fs.existsSync(overwrittenDirPath)) {
fs.rmSync(overwrittenDirPath, { recursive: true, force: true });
}
} catch (err) {
console.error(err);
}