@salesforce-ux/design-system-data
Version:
This package contains scripts to generate data and data assets for aspects of the Salesforce Lightning Design System (SLDS).
398 lines (358 loc) • 18.6 kB
JavaScript
var $6Hlig$path = require("path");
var $6Hlig$fs = require("fs");
var $6Hlig$nconf = require("nconf");
var $6Hlig$glob = require("glob");
var $parcel$global = globalThis;
var $parcel$modules = {};
var $parcel$inits = {};
var parcelRequire = $parcel$global["parcelRequire1c17"];
if (parcelRequire == null) {
parcelRequire = function(id) {
if (id in $parcel$modules) {
return $parcel$modules[id].exports;
}
if (id in $parcel$inits) {
var init = $parcel$inits[id];
delete $parcel$inits[id];
var module = {id: id, exports: {}};
$parcel$modules[id] = module;
init.call(module.exports, module, module.exports);
return module.exports;
}
var err = new Error("Cannot find module '" + id + "'");
err.code = 'MODULE_NOT_FOUND';
throw err;
};
parcelRequire.register = function register(id, init) {
$parcel$inits[id] = init;
};
$parcel$global["parcelRequire1c17"] = parcelRequire;
}
var parcelRegister = parcelRequire.register;
parcelRegister("18Px7", function(module, exports) {
module.exports = function findNodeModules(baseDir) {
let currentDir = baseDir;
while(currentDir !== $6Hlig$path.resolve(currentDir, "..")){
// Stop when reaching the root
const candidatePath = $6Hlig$path.join(currentDir, "node_modules");
if ($6Hlig$fs.existsSync(candidatePath)) return candidatePath;
currentDir = $6Hlig$path.resolve(currentDir, "..");
}
throw new Error("Unable to find node_modules directory.");
};
});
parcelRegister("67Y3J", function(module, exports) {
/**
* Gets the output path from command line arguments or defaults to current working directory
* @returns {string} The resolved output path
*/ const $4761fc068f0672f1$var$getOutputPath = ()=>{
$6Hlig$nconf.argv();
return $6Hlig$nconf.get("output") || process.cwd();
};
/**
* Writes data to a file in the specified output directory
* @param {string} data - The data to write
* @param {string} filename - The name of the file to create
* @param {string} outputPath - The output directory path (optional, defaults to current working directory)
*/ const $4761fc068f0672f1$var$writeFile = (data, filename, outputPath = null)=>{
const outputDir = $6Hlig$path.resolve(outputPath || $4761fc068f0672f1$var$getOutputPath());
const outputFile = $6Hlig$path.join(outputDir, filename);
// Ensure the output directory exists
if (!$6Hlig$fs.existsSync(outputDir)) $6Hlig$fs.mkdirSync(outputDir, {
recursive: true
});
$6Hlig$fs.writeFile(outputFile, data, "utf8", (err)=>{
if (err) console.error(`Error writing ${filename}:`, err);
else console.log(`${filename} has been saved successfully to: ${outputFile}`);
});
};
/**
* Writes JSON data to a file in the specified output directory
* @param {Object} data - The data object to stringify and write
* @param {string} filename - The name of the file to create
* @param {string} outputPath - The output directory path (optional, defaults to current working directory)
* @param {number} indent - Number of spaces for indentation (optional, defaults to 2)
*/ const $4761fc068f0672f1$var$writeJsonFile = (data, filename, outputPath = null, indent = 2)=>{
const jsonData = JSON.stringify(data, null, indent);
$4761fc068f0672f1$var$writeFile(jsonData, filename, outputPath);
};
module.exports = {
getOutputPath: $4761fc068f0672f1$var$getOutputPath,
writeFile: $4761fc068f0672f1$var$writeFile,
writeJsonFile: $4761fc068f0672f1$var$writeJsonFile
};
});
var $26ad2ed560084b4c$var$$parcel$__dirname = $6Hlig$path.resolve(__dirname, "../src");
var $8ff24f2f75d44b86$exports = {};
// @preval
// Copyright (c) 2015-present, Salesforce, Inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license
var $8ff24f2f75d44b86$var$$parcel$__dirname = $6Hlig$path.resolve(__dirname, "../src/preval");
var $528a2b02543756b6$exports = {};
$528a2b02543756b6$exports = JSON.parse('{"files":["colors.raw.json","transparent-colors.raw.json","palettes.raw.json","font.raw.json","hooks.raw.json","radius.raw.json","ratio.raw.json","shadow.raw.json","sizing.raw.json","spacing.raw.json"],"categories":{"system-color":{"name":"system-color","type":"color","label":"System Colors","description":"System level styling hooks would provide a way to manage the visual appearance of elements across an entire application.","groups":["theme","feedback","borders","links"]},"reference-color":{"name":"reference-color","type":"color","label":"Palette Colors","description":"Generic colors to use within a Salesforce application.","groups":["reference"]}}}');
var $18Px7 = parcelRequire("18Px7");
const $8ff24f2f75d44b86$var$nodeModulesDir = $18Px7($8ff24f2f75d44b86$var$$parcel$__dirname);
const $8ff24f2f75d44b86$var$SLDS_V_1 = "slds-v1"; //default
const $8ff24f2f75d44b86$var$SLDS_V_2 = "slds-v2";
let $8ff24f2f75d44b86$var$dsVer = $8ff24f2f75d44b86$var$SLDS_V_2;
const $8ff24f2f75d44b86$var$sldsModule = $8ff24f2f75d44b86$var$dsVer === $8ff24f2f75d44b86$var$SLDS_V_2 ? "@salesforce-ux/sds-styling-hooks" : "@salesforce-ux/design-system";
const $8ff24f2f75d44b86$var$globalStylingHooksPath = $6Hlig$path.resolve.bind($6Hlig$path, $8ff24f2f75d44b86$var$dsVer === $8ff24f2f75d44b86$var$SLDS_V_2 ? `${$8ff24f2f75d44b86$var$nodeModulesDir}/${$8ff24f2f75d44b86$var$sldsModule}/dist` : `${$8ff24f2f75d44b86$var$nodeModulesDir}/${$8ff24f2f75d44b86$var$sldsModule}/design-tokens/dist`);
const $8ff24f2f75d44b86$var$getJsonFilePath = (fileName)=>$8ff24f2f75d44b86$var$globalStylingHooksPath(fileName);
const $8ff24f2f75d44b86$var$readJsonFile = (file)=>{
try {
return JSON.parse($6Hlig$fs.readFileSync(file));
} catch (error) {
// Return an empty object instead of breaking
if (error.code === "ENOENT") {
console.warn(`/// WARN: Couldn't find ${file}`);
return {};
} else throw error;
}
};
const $8ff24f2f75d44b86$var$getPropsFromJson = (json)=>json.props || {};
// const createJsonForCategory = _ => ({ stylingHooks: {} });
/**
* Return category name if styling hook type and group
* matches the category type and either of category group
*/ const $8ff24f2f75d44b86$var$hasMatchingCategory = ({ category: category, group: group, type: type }, categories)=>{
const { groups: categoryGroups, type: categoryType } = categories[category];
return categoryGroups.includes(group) && type === categoryType;
};
const $8ff24f2f75d44b86$var$findMatchingCategory = ({ group: group, type: type }, categories)=>Object.keys(categories).find((category)=>$8ff24f2f75d44b86$var$hasMatchingCategory({
category: category,
group: group,
type: type
}, categories));
const $8ff24f2f75d44b86$var$findCategoryForHook = ({ group: group, type: type }, categories)=>{
const foundCategory = $8ff24f2f75d44b86$var$findMatchingCategory({
group: group,
type: type
}, categories);
return foundCategory ? foundCategory : "Others"; // fallback category
};
// const populateCategoryDetails = (results, categories) => {
// Object.keys(results)
// .forEach(category => {
// const { description, label } = categories[category];
// results[category].description = description;
// results[category].label = label;
// });
// return results;
// };
const $8ff24f2f75d44b86$var$prepareHooksData = (props, categories)=>{
const allHooks = [];
Object.keys(props).forEach((key)=>{
const { comment: comment, name: name, value: value, originalValue: originalValue, scope: scope, group: group, type: type } = props[key];
allHooks.push({
name: `--slds-g-${name}`,
groupCategory: $8ff24f2f75d44b86$var$findCategoryForHook({
group: group,
type: type
}, categories),
value: value && value.startsWith("#") ? value.toUpperCase() : value,
originalValue: originalValue && originalValue.startsWith("rgb") ? "" : originalValue.replace(/{|}|!/g, ""),
scope: scope,
comment: comment
});
});
return allHooks;
};
const $8ff24f2f75d44b86$var$generate = ()=>{
const allProps = $528a2b02543756b6$exports.files.map($8ff24f2f75d44b86$var$getJsonFilePath).map($8ff24f2f75d44b86$var$readJsonFile).map($8ff24f2f75d44b86$var$getPropsFromJson).reduce((result, curr)=>{
return {
...result,
...curr
};
}, {});
return $8ff24f2f75d44b86$var$prepareHooksData(allProps, $528a2b02543756b6$exports.categories);
};
$8ff24f2f75d44b86$exports = $8ff24f2f75d44b86$var$generate();
var $fefc60366a785d00$exports = {};
var $fefc60366a785d00$var$$parcel$__dirname = $6Hlig$path.resolve(__dirname, "../src/preval");
var $18Px7 = parcelRequire("18Px7");
const $fefc60366a785d00$var$nodeModulesDir = $18Px7($fefc60366a785d00$var$$parcel$__dirname);
const $fefc60366a785d00$var$sldsModule = "@salesforce-ux/design-system";
const $fefc60366a785d00$var$globPattern = `${$fefc60366a785d00$var$nodeModulesDir}/${$fefc60366a785d00$var$sldsModule}/metadata/components/*/styling-hooks.json`;
function $fefc60366a785d00$var$collectComponentHooks(globPattern) {
const componentHooks = [];
$6Hlig$glob.sync(globPattern).forEach((file)=>{
const content = JSON.parse($6Hlig$fs.readFileSync(file, "utf-8"));
// Extract the component name from the file path using the wildcard part
const componentFolderMatch = file.match(/components\/(.+?)\/styling-hooks\.json/);
const componentName = componentFolderMatch ? componentFolderMatch[1] : null;
// Iterate over each key-value pair in the content and form the new object
for (const [key, value] of Object.entries(content)){
const { valueType: valueType, category: category, ...propValues } = value;
// Rename the key 'fallbackValue' to 'value'
if (propValues.hasOwnProperty("fallbackValue")) {
propValues.value = propValues.fallbackValue;
delete propValues.fallbackValue;
}
componentHooks.push({
component: componentName,
name: key,
scope: "component",
valueType: valueType && valueType.toLowerCase() || "",
category: category && category.toLowerCase() || "",
...propValues
});
}
});
return componentHooks;
}
const $fefc60366a785d00$var$result = $fefc60366a785d00$var$collectComponentHooks($fefc60366a785d00$var$globPattern);
$fefc60366a785d00$exports = $fefc60366a785d00$var$result; // Optional: write the result to a file
// const outputPath = path.join(__dirname, 'combined-styling-hooks.json');
// fs.writeFileSync(outputPath, JSON.stringify(result, null, 2), 'utf-8');
var $67Y3J = parcelRequire("67Y3J");
var $26ad2ed560084b4c$require$writeJsonFile = $67Y3J.writeJsonFile;
$6Hlig$nconf.argv();
const $26ad2ed560084b4c$var$generateToFile = $6Hlig$nconf.get("to-file");
const $26ad2ed560084b4c$var$specifiedTheme = $6Hlig$nconf.get("theme");
// Determine the theme to use based on the logic:
// - If to-file is true and no theme specified, generate both themes
// - If to-file is false, require a theme (default to "lightning")
// - If theme is explicitly specified, use that theme
let $26ad2ed560084b4c$var$theme;
if ($26ad2ed560084b4c$var$generateToFile && !$26ad2ed560084b4c$var$specifiedTheme) $26ad2ed560084b4c$var$theme = "both"; // Special case for generating both themes
else $26ad2ed560084b4c$var$theme = $26ad2ed560084b4c$var$specifiedTheme || "lightning"; // Default to lightning for console output
// Load the metadata file
// This file is generated by the design-systems-metadata repo via the commands:
// ❯ npx @salesforce-ux/metadata-cli generate styling-hooks-metadata -f json
// ❯ mv -f ../design-systems-metadata/data/styling-hooks.metadata.json ./data/styling-hooks.metadata.json
const $26ad2ed560084b4c$var$metadataPath = $6Hlig$path.join($26ad2ed560084b4c$var$$parcel$__dirname, "../data/styling-hooks.metadata.json");
const $26ad2ed560084b4c$var$metadata = JSON.parse($6Hlig$fs.readFileSync($26ad2ed560084b4c$var$metadataPath, "utf8"));
const $26ad2ed560084b4c$var$transformMetadataToStylingHooks = (metadata, themeType)=>{
const hooks = [];
// Process global hooks
if (metadata.global) Object.entries(metadata.global).forEach(([name, hookData])=>{
// Skip if the theme doesn't have a value
if (!hookData.values || !hookData.values[themeType]) return;
const hook = {
name: name,
groupCategory: hookData.category,
value: hookData.values[themeType],
originalValue: hookData.aliases?.[themeType] || hookData.values[themeType],
scope: hookData.scope || "global"
};
// Add comment if available
if (hookData.comment) hook.comment = hookData.comment;
hooks.push(hook);
});
// Process shared hooks
if (metadata.shared) Object.entries(metadata.shared).forEach(([name, hookData])=>{
// Skip if the theme doesn't have a value
if (!hookData.values || !hookData.values[themeType]) return;
const hook = {
name: name,
groupCategory: hookData.category,
value: hookData.values[themeType],
originalValue: hookData.aliases?.[themeType] || hookData.values[themeType],
scope: hookData.scope || "shared"
};
// Add comment if available
if (hookData.comment) hook.comment = hookData.comment;
hooks.push(hook);
});
// Process component hooks if they exist
if (metadata.components) Object.entries(metadata.components).forEach(([componentName, componentHooks])=>{
Object.entries(componentHooks).forEach(([name, hookData])=>{
// Skip if the theme doesn't have a value
if (!hookData.values || !hookData.values[themeType]) return;
const hook = {
name: name,
groupCategory: hookData.category,
value: hookData.values[themeType],
originalValue: hookData.aliases?.[themeType] || hookData.values[themeType],
scope: hookData.scope || "component",
component: componentName // Add the component name
};
// Add comment if available
if (hookData.comment) hook.comment = hookData.comment;
hooks.push(hook);
});
});
return hooks;
};
const $26ad2ed560084b4c$var$transformComponentHooksToStylingHooks = (componentHooks)=>{
return componentHooks.map((hook)=>({
name: hook.name,
groupCategory: hook.category,
value: hook.value,
originalValue: hook.value,
scope: hook.scope,
comment: hook.comment,
component: hook.component // Preserve the component property
}));
};
const $26ad2ed560084b4c$var$mergeHooksWithMetadata = (baseHooks, metadataHooks)=>{
// Create a map of base hooks by name for quick lookup
const baseHooksMap = new Map();
baseHooks.forEach((hook)=>{
baseHooksMap.set(hook.name, hook);
});
// Create a map of metadata hooks by name for quick lookup
const metadataHooksMap = new Map();
metadataHooks.forEach((hook)=>{
metadataHooksMap.set(hook.name, hook);
});
const mergedHooks = [];
// Process all base hooks first, supplementing with metadata where available
baseHooks.forEach((baseHook)=>{
const metadataHook = metadataHooksMap.get(baseHook.name);
if (metadataHook) {
// Merge metadata hook with base hook, preserving base hook properties
const mergedHook = {
...baseHook,
// Update values from metadata if they exist
value: metadataHook.value !== undefined ? metadataHook.value : baseHook.value,
originalValue: metadataHook.originalValue !== undefined ? metadataHook.originalValue : baseHook.originalValue,
groupCategory: metadataHook.groupCategory || baseHook.groupCategory,
scope: metadataHook.scope || baseHook.scope
};
// Add comment from metadata if base hook doesn't have one
if (!mergedHook.comment && metadataHook.comment) mergedHook.comment = metadataHook.comment;
mergedHooks.push(mergedHook);
// Remove from metadata map to avoid duplication
metadataHooksMap.delete(baseHook.name);
} else // Keep base hook as is
mergedHooks.push(baseHook);
});
// Add any remaining metadata hooks that weren't in the base
metadataHooksMap.forEach((metadataHook)=>{
mergedHooks.push(metadataHook);
});
return mergedHooks;
};
const $26ad2ed560084b4c$var$writeFile = (data, themeType)=>{
const filename = `styling-hooks-${themeType}.json`;
$26ad2ed560084b4c$require$writeJsonFile(data, filename);
};
const $26ad2ed560084b4c$var$generate = (themeType, toFile)=>{
// Map lightning theme to slds for internal processing
const internalTheme = themeType === "lightning" ? "slds" : themeType;
// Get base hooks from the original generateStylingHooks approach
const baseHooks = [
...$8ff24f2f75d44b86$exports || [],
...$26ad2ed560084b4c$var$transformComponentHooksToStylingHooks($fefc60366a785d00$exports || [])
];
// Get metadata hooks
const metadataHooks = $26ad2ed560084b4c$var$transformMetadataToStylingHooks($26ad2ed560084b4c$var$metadata, internalTheme);
// Merge base hooks with metadata hooks
const mergedHooks = $26ad2ed560084b4c$var$mergeHooksWithMetadata(baseHooks, metadataHooks);
if (!toFile) console.log(JSON.stringify(mergedHooks, null, 2));
else $26ad2ed560084b4c$var$writeFile(mergedHooks, themeType);
return mergedHooks;
};
// Handle the "both" case (default when --to-file=true and no theme specified)
if ($26ad2ed560084b4c$var$theme === "both") {
// Only write to file, do not output to console
const lightningHooks = $26ad2ed560084b4c$var$generate("lightning", true);
const cosmosHooks = $26ad2ed560084b4c$var$generate("cosmos", true);
module.exports = {
lightning: lightningHooks,
cosmos: cosmosHooks
};
} else // Generate the specified theme
module.exports = $26ad2ed560084b4c$var$generate($26ad2ed560084b4c$var$theme, $26ad2ed560084b4c$var$generateToFile);
//# sourceMappingURL=generateStylingHooks.js.map