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);
|
|
|
|
}
|