feat: resolves the design token values [ALT-171]

[ryunsong-contentful]

Approach

Only do this for margin and padding so we can first agree on the implementation structure and then once agreed we can apply it for all other tokens like direction, background color, border.

Additionally, the strategy is as follows
Use a set to determine which potential variables (cfMargin, cfPadding) could have template strings
If the variable is one of those types which could have a template string, run through a specific parser that will know how to handle the given type in the designTokenRegistry file. This way we can map specific parsers to specific variable types which may share or differ in their structure. Therefore as we add a new variable type (ie. border in a separate PR) we can refactor this code to generalize as we go along

Purpose

Stores the design token key instead of the hard coded value, and then is able to resolve the design token key and display the value instead.

TODOs

• The other design tokens such as direction, size, border, background color
• Pills to show the user that what they've selected is a design token

[primeinteger]

Nice work on this!

[primeinteger]

I've accidently generated this file before too, but since this repo only uses yarn, I think you can delete this

[primeinteger]

The changes to this file were possibly generated by npm. When this happens to me, I delete node_modules directory and regenerate the yarn.lock file using yarn

[primeinteger]

The uppercase first letter is standard for component names and types/interfaces but uncommon for variable names.

Suggested change

	const AvailableDesignTokenVariables = new Set(['cfPadding', 'cfMargin']);
	const availableDesignTokenVariables = new Set(['cfPadding', 'cfMargin']);

[primeinteger]

The if statements could be combined

Suggested change

	if (AvailableDesignTokenVariables.has(variableName)) {
	if (variableName === 'cfMargin' || variableName === 'cfPadding')
	if (AvailableDesignTokenVariables.has(variableName) && ['cfMargin', 'cfPadding'].includes(variableName)) {

[ryunsong-contentful]

I purposely did this so that when there's other attributes like border or whatever, I will add a separate clause for that so that I can direct that to the getDesignTokenRegistrationForBorder function. So this is the structure I want for the future even though today, in this PR you can shorten it like this. Hopefully what I wrote makes sense

[ryunsong-contentful]

      if (AvailableDesignTokenVariables.has(variableName)) {
        if (variableName === 'cfMargin' || variableName === 'cfPadding')
          return getDesignTokenRegistrationForSpacing(valuesByBreakpoint[breakpointId]);
        if(variableName === 'cfBorder')return 
          getDesignTokenRegistrationForBorder(valuesByBreakpoint[breakpointId]);
      }

[primeinteger]

Got it, makes sense 👍

If enough values are checked on the inner part, a switch might be preferable too

[primeinteger]

The regex you added to the resolveSpacingDesignToken method could be used here if you wanted

Suggested change

	const isTemplateStringFormat = (str: string) => {
	if (!str || str.length < 3) return false;
	return str.charAt(0) === '$' && str.charAt(1) === '{' && str.charAt(str.length - 1) === '}';
	};
	const isTemplateStringFormat = (str: string) => {
	const regex = /\$\{([^}]+)\}/g;
	return regex.test(str);
	};