Feature Request: ability to provide a custom function to create Token

[acherkashin]

Hi! First of all, thank you for this great storybook addon. I'm looking forward to integrating it for my work project. But currently it is very hard to display my design tokens with this addon due to the following reasons:

1. Svg files

I need to modify every svg file to add either id or data-token-name. It makes it hard to use the addon for any existing project.

Possible solution

To make it easier to use the addon for existing projects we could use file path or file name to specify the token name. In this case, it will not be necessary to go and modify all existing svg files.

It should be one-line change so I could create a pull-request if you approve this change.

2. Less variables

The approach with using @tokens and @presenters works well for the global variables.

/**
  * @tokens Colors
  * @presenter Color
  */

However, we use a kind of a "component approach" to specify colors and icons for every component. In this case, we need to specify @tokens and @presenter for every like what makes it almost impossible to use the addon.

@chat-user-icon: url('@{images-icons-path}/chat-icon-user.svg');
@chat-close-icon: @icon-cross-dark;
@chat-support-icon: url('@{images-icons-path}/chat-icon-support.svg');
@chat-header-background: @color-secondary-light4;
@chat-minimize-background: @color-secondary-dark4;
@chat-panel-bordercolor: @color-secondary-dark5;\
@chat-panel-fontweight: @font-weight-bold;

Possible solution

I guess, this could be solved if we could specify custom function which returns Token for css/less variable, or even better function postProcessToken where we could modify only needed fields of the token. I'm not sure if it is possible, but we could specify this custom function in .storybook/main.js file.

In my case it is easy to determine @presenter based on token name, if variable name ends withbackground or color, Color presenter should be used, the same logic for variable which ends with fontweight. So, the function would look like:

({variableName}) => {
  if (variableName.endsWith('background')) {
    return {
      // other Token properties
      presenter: `Color`
    };
  } else if(variableName.endsWith('fontweight')) {
    return {
      // other Token properties
      presenter: 'FontWeight',
    };
  }
}

This approach could solve issue with svg as well, as we could provide custom function and use filename or path there to specify token name.

[Sqrrl]

Hi. Thanks for your feedback. Point 1 should be resolved thanks to your PR, right?

For the second request: I don't see a reason why this wouldn't work. As this is a very specific feature, I just don't know how high I can prioritize it.

[acherkashin]

@Sqrrl yes, the first issue is fixed. I could work on the second feature when I have time, but I'm not sure how can I pass function from the project that uses addon to addon itself. Do you have any ideas? 🤔

[Sqrrl]

I would prefer passing the function via the preview.js. E.g.

export const parameters = {
  designToken: {
    defaultTab: 'Colors',
    tokenTransformer: () => {}
  }
};

Then you could hook into useTokenTabs.ts and do the transformation during runtime.

[acherkashin]

Thank you! I will work on it as soon as I have time, I think it will happen soon! 👍

[acherkashin]

@Sqrrl I was thinking about possible implementation and got stuck with one thing.

As I'm going to determine presenter and token's category based on the variable name, it doesn't make sense to add these configuration comments.

/**
  * @tokens Colors
  * @presenter Color
  */

Currently I have to, otherwise my styles file will not be parsed.

Could you guide me on what will be the right way to solve that issue? To parse tokens in styles file and don't specify comments.

[acherkashin]

@Sqrrl I understand that you are busy, and I appreciate your time. Could you look at my comment above when you have time?