Feature request: support custom presenter

[zhanglun]

different designers may export token files with different tools and settings. token's type may not in the available-presenters list.

Do you have plans to support this capability?

Thanks

[griiettner]

I second this feature request. Our presenter styles does not match the ones added in this version, I wish we could have custom presenters

[acherkashin]

@griiettner @zhanglun

Could you give an example?

[Jeremy-Walton]

@acherkashin Being able to customize what the existing presenters look like would be helpful, but also adding new types like the ones listed below.

Height. Basically the Spacing Presenter but the width and height flipped. Helpful for design systems that support different height variations of buttons or inputs and allow the sizes to be customized. (--input-height-small, --input-height-medium, --input-height-large).

Z-Index. Not really sure how to display this one but could be useful for people who want to make a presenter for it.

URI encoded SVGs like url("data:image/svg+xml,%3Csvg viewBox='0 0 10 7' version='1.1' xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cg transform='matrix(0.983953,0,0,1.00934,-9.22679,-3.65885)'%3E%3Cpath fill='%23d1d1d1' d='M9.37727 3.625l5.08154 6.93523L19.54036 3.625'/%3E%3C/g%3E%3C/svg%3E%0A"); which are used as backgrounds for elements. The presenter could simply apply it as a background with the position centered.

More animation support. Currently you have an animation presenter, but what is someone has their ms timings in individual tokens? There is no current way to show that. Maybe a AnimationTiming presenter?

Allowing us to register new Presenters would be fantastic for extensibility and customization

[acherkashin]

Currently, I've found a way to add custom presenters only for DesignTokenDocBlock component.
It seems we cannot provide "configuration" with custom presenters via parameters in ./preview.js, I've created an issue in storybook repository, maybe they will suggest something.

@Jeremy-Walton Will it be enough for your use case to specify only custom presenters in DesignTokenDocBlock component?

It will look in the following way:

//Presenters.tsx
import { PresenterMapType } from 'storybook-design-token/dist/components/TokenPreview';

export const presenters: PresenterMapType = {
    'Image': ImagePresenter,
    'ZIndex': ZIndexPresenter, // you will need to specify this presenter in your styles to make sure it is used for ZIndex
};

function ImagePresenter({ token }: any) {
    return <div style={{ background: 'red' }}>{token.value}</div>;
}

function ZIndexPresenter(...) {
  // ....
}

import { presenters } from './../Presenters';

<DesignTokenDocBlock categoryName="Images" viewType="card" presenters={presenters}/>

[acherkashin]

@Sqrrl I've created a draft merge request, could you look at the idea?

In this merge request, I add ability to specify custom presenter for DesignTokenDocBlock.

[acherkashin]

@Sqrrl Custom presenters were implemented in #187, so you could close this issue